/* Sycamore Creek Trucking */

:root {
  --ink: #1F1C19;
  --brown: #57483C;
  --tan: #C9B79F;
  --bone: #EFEBE3;
  --stone: #D9D5CE;
  --white: #FFFFFF;

  --line: #C4BFB6;
  --line-dark: #3A342E;
  --outline: #6E665D;

  --text-2: #2B2724;
  --text-3: #3C3733;
  --text-4: #4A443E;

  --on-dark-1: #EFEBE3;
  --on-dark-2: #DCD7CE;
  --on-dark-3: #D5D0C7;
  --on-dark-4: #CFC8BF;
  --on-dark-5: #BEB6AC;
  --on-dark-muted: #A49C93;

  --display: "Barlow Condensed", Haettenschweiler, "Arial Narrow", sans-serif;
  --body: Bitter, Georgia, serif;

  --max: 1220px;
  --gutter: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -0.005em;
}

p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { color: var(--brown); text-decoration: none; transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }

[id] { scroll-margin-top: 80px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tan); color: var(--ink); padding: 10px 16px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--ink); }

/* Shared type */
.eyebrow {
  font-family: var(--display); text-transform: uppercase; font-weight: 600;
  font-size: 13px; letter-spacing: .2em; color: var(--tan);
}
.eyebrow--brown { color: var(--brown); letter-spacing: .16em; }
.eyebrow-rule { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.eyebrow-rule::before { content: ""; width: 30px; height: 2px; background: var(--tan); flex: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: 19px; letter-spacing: .05em; padding: 15px 26px; border: 0; cursor: pointer;
}
.btn--sm { font-size: 17px; padding: 12px 20px; }
.btn--tan { background: var(--tan); color: var(--ink); }
.btn--tan:hover { background: var(--bone); color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--tan); }
.btn--dark:hover { background: var(--brown); color: var(--on-dark-1); }
.btn--outline-light { border: 2px solid var(--outline); color: var(--on-dark-1); padding: 13px 24px; }
.btn--outline-light:hover { border-color: var(--tan); color: var(--on-dark-1); }
.btn--outline-dark { border: 2px solid var(--ink); color: var(--ink); padding: 13px 24px; }
.btn--outline-dark:hover { border-color: var(--brown); color: var(--brown); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); border-bottom: 3px solid var(--tan); }
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.logo { display: flex; align-items: center; flex: none; padding: 12px 0; }
.logo img { height: 36px; width: auto; filter: invert(1); }

.nav { order: 1; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a {
  color: var(--on-dark-2); font-family: var(--display); text-transform: uppercase;
  font-weight: 600; font-size: 17px; letter-spacing: .06em; padding: 9px 13px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--tan); }

.site-header__actions { order: 2; display: flex; align-items: center; }
.phone-btn {
  margin-left: 10px; background: var(--tan); color: var(--ink);
  font-family: var(--display); text-transform: uppercase; font-weight: 700;
  font-size: 17px; letter-spacing: .05em; padding: 11px 17px; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
}
.phone-btn:hover { background: var(--bone); color: var(--ink); }
.phone-btn__short { display: none; }

.menu-btn {
  display: none; margin-left: 8px; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--line-dark); color: var(--on-dark-1); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative;
}
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .site-header__inner { flex-wrap: wrap; gap: 0 12px; }
  .site-header__actions { margin-left: auto; }
  .phone-btn { margin-left: 0; }
  .menu-btn { display: inline-flex; }
  .nav {
    display: none; order: 3; flex-basis: 100%; margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--line-dark); padding: 6px 0 12px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 0; min-height: 44px; }
}
@media (max-width: 440px) {
  :root { --gutter: 16px; }
  .logo img { height: 30px; }
  .phone-btn__full { display: none; }
  .phone-btn__short { display: inline; }
  .phone-btn { padding: 11px 16px; }
}
@media (max-width: 350px) {
  :root { --gutter: 12px; }
  .site-header__inner { column-gap: 8px; }
  .logo img { height: 26px; }
  .menu-btn { margin-left: 6px; }
}

/* Photo heroes */
.hero { position: relative; background: var(--ink); overflow: hidden; display: flex; align-items: center; }
.hero--home { min-height: min(66vh, 560px); }
.hero--careers { min-height: min(52vh, 440px); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--home .hero__bg { opacity: .5; }
.hero--careers .hero__bg { opacity: .45; }
.hero::after { content: ""; position: absolute; inset: 0; }
.hero--home::after { background: linear-gradient(90deg, rgba(31,28,25,.94) 0%, rgba(31,28,25,.74) 48%, rgba(31,28,25,.2) 100%); }
.hero--careers::after { background: linear-gradient(90deg, rgba(31,28,25,.94) 0%, rgba(31,28,25,.7) 52%, rgba(31,28,25,.25) 100%); }
.hero__inner { position: relative; z-index: 1; width: 100%; padding-top: 56px; padding-bottom: 60px; }
.hero h1 { color: var(--on-dark-1); }
.hero--home h1 { font-size: clamp(46px, 7.6vw, 84px); }
.hero--careers h1 { font-size: clamp(40px, 6.2vw, 70px); margin-top: 16px; }
.hero h1 span { color: var(--tan); }
.hero__lede { margin-top: 22px; max-width: 46ch; font-size: 17px; line-height: 1.65; color: var(--on-dark-3); }
.hero--home .btn-row { margin-top: 30px; }
.hero--careers .btn { margin-top: 26px; font-size: 20px; padding: 16px 28px; }

/* Dark page header (About) */
.page-head { background: var(--ink); color: var(--on-dark-1); }
.page-head__inner { padding-top: 64px; padding-bottom: 60px; }
.page-head h1 { font-size: clamp(42px, 6.4vw, 72px); margin-top: 16px; color: var(--on-dark-1); }

/* Tan bar */
.tanbar { background: var(--tan); color: var(--ink); }
.tanbar__inner {
  padding-top: 13px; padding-bottom: 13px; display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center;
  font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 16px; letter-spacing: .09em;
}
.tanbar__sep { opacity: .45; }

/* Stats */
.stats { border-bottom: 1px solid var(--line); }
.stats__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 34px var(--gutter); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat__num { font-family: var(--display); font-weight: 700; font-size: 56px; color: var(--brown); line-height: 1; }
.stat p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-4); }
.stats--compact .stats__grid { max-width: none; }
.stats--compact .stat { padding: 30px var(--gutter); }
.stats--compact .stat__num { font-size: 46px; }
@media (max-width: 659px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
}

/* Sections */
.section-head { border-bottom: 2px solid var(--ink); padding-bottom: 16px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(34px, 5vw, 50px); }

.ways { padding-top: 72px; padding-bottom: 8px; }
.ways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 20px; }
.way { background: var(--bone); border: 2px solid var(--ink); padding: 28px 26px 26px; display: flex; flex-direction: column; }
.way__num { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 600; color: var(--brown); }
.way h3 { font-size: 31px; margin-top: 10px; }
.way p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--text-3); flex: 1; }
.way .btn { margin-top: 20px; align-self: flex-start; }
.way--dark { background: var(--ink); }
.way--dark .way__num { color: var(--tan); }
.way--dark h3 { color: var(--on-dark-1); }
.way--dark p { color: var(--on-dark-4); }

.fleet { padding-top: 72px; padding-bottom: 76px; }
.fleet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 20px; }
.rig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.rig img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--stone); }
.rig h3 { font-size: 24px; border-top: 2px solid var(--ink); padding-top: 10px; }

.band { background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band__inner {
  padding-top: 64px; padding-bottom: 68px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 44px; align-items: center;
}
.band h2 { font-size: clamp(34px, 5vw, 52px); margin-top: 12px; }
.band p { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--text-3); max-width: 46ch; }
.band .btn { margin-top: 24px; }
.band__img { width: 100%; height: 320px; object-fit: cover; }

/* About */
.story {
  padding-top: 68px; padding-bottom: 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; align-items: start;
}
.story h2 { font-size: clamp(32px, 4.6vw, 46px); }
.story__logo { margin-top: 26px; background: var(--white); border: 1px solid var(--line); padding: 20px; display: inline-block; }
.story__logo img { width: 200px; height: auto; }
.story__copy { display: flex; flex-direction: column; gap: 20px; }
.story__copy p { font-size: 17px; line-height: 1.8; color: var(--text-2); }
.gallery {
  padding-top: 44px; padding-bottom: 72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px;
}
.gallery img { width: 100%; height: 240px; object-fit: cover; }

/* Careers */
.perks { padding-top: 64px; padding-bottom: 8px; }
.perks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.perk { background: var(--bone); padding: 28px 26px; border: 1px solid var(--line); border-top: 4px solid var(--tan); }
.perk h3 { font-size: 28px; }
.seeking {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px 44px; align-items: start;
}
.seeking h2, .questions h2 { font-size: clamp(30px, 4.4vw, 44px); }
.seeking p { font-size: 17px; line-height: 1.75; color: var(--text-2); max-width: 52ch; }
.questions {
  padding-top: 56px; padding-bottom: 76px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 44px; align-items: center;
}
.questions p { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--text-3); max-width: 44ch; }
.questions .btn-row { margin-top: 24px; }
.questions__img { width: 100%; height: 300px; object-fit: cover; }

/* Footer */
.footer { background: var(--ink); color: var(--on-dark-muted); border-top: 3px solid var(--tan); }
.footer__grid {
  padding-top: 44px; padding-bottom: 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px;
}
.footer__logo img { height: 34px; width: auto; filter: invert(1); }
.footer__tag { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--on-dark-5); max-width: 34ch; }
.footer h4 { font-size: 19px; color: var(--on-dark-1); letter-spacing: .06em; }
.footer__contact { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.6; }
.footer__phone { color: var(--on-dark-1); font-family: var(--display); text-transform: uppercase; font-size: 22px; letter-spacing: .04em; font-weight: 700; }
.footer__phone:hover { color: var(--tan); }
.footer__email { color: var(--tan); overflow-wrap: anywhere; }
.footer__email:hover { color: var(--on-dark-1); }
.footer__addr { color: var(--on-dark-5); }
.footer__addr:hover { color: var(--tan); }
.footer__pages {
  margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; font-size: 16px; font-weight: 600;
}
.footer__pages a { color: var(--on-dark-5); }
.footer__pages a:hover { color: var(--tan); }
.footer__bottom { border-top: 1px solid var(--line-dark); }
.footer__bottom-inner { padding-top: 18px; padding-bottom: 18px; font-size: 13px; color: var(--on-dark-muted); }