:root {
  --red: #ed171c;
  --red-dark: #a90d12;
  --ink: #111114;
  --paper: #eee5d4;
  --paper-light: #fffaf0;
  --pencil: #49423b;
  --tape: rgba(223, 203, 155, .72);
  --shadow: 0 20px 46px rgba(26, 19, 13, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #171719; color: var(--ink); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-160%); padding: 10px 14px; background: #fff; border: 2px solid var(--red); color: #000; font-weight: 800; }
.skip-link:focus { transform: none; }

.preview-header { position: relative; z-index: 10; width: min(100%, 1440px); min-height: 94px; margin-inline: auto; display: grid; grid-template-columns: 180px 1fr 180px; align-items: center; gap: 30px; padding: 12px clamp(22px, 5vw, 72px); background: var(--ink); color: #fff; }
.preview-brand { display: inline-flex; width: 150px; min-height: 65px; align-items: center; padding: 7px 11px; background: #fff; }
.preview-brand img { width: 100%; height: 52px; object-fit: contain; }
.preview-heading { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.preview-badge { padding: 7px 10px; background: var(--red-dark); color: #fff; }
.back-link { justify-self: end; padding-bottom: 2px; border-bottom: 2px solid var(--red); color: #fff; font-size: .78rem; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.back-link:hover, .back-link:focus-visible { color: #ff656a; }

.team-page { position: relative; width: min(100%, 1440px); margin-inline: auto; overflow: hidden; background-color: var(--paper); background-image: radial-gradient(rgba(69, 47, 28, .1) .7px, transparent .8px), linear-gradient(90deg, rgba(255,255,255,.22), transparent 22%, rgba(98,67,39,.035) 66%, transparent); background-size: 8px 8px, 100% 100%; box-shadow: 0 0 80px rgba(0,0,0,.42); }
.team-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(102,73,43,.08) 35px, transparent 36px); }
.team-page > * { position: relative; }
.kicker { margin: 0 0 9px; color: var(--red-dark); font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; }
h1, h2 { margin: 0; font-family: "Arial Black", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: -.05em; line-height: .98; }
h1 { max-width: 850px; font-size: clamp(3.4rem, 8.2vw, 7.7rem); }
#page-title { text-transform: none; letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(2.35rem, 5vw, 5.2rem); }

.team-hero { min-height: 1040px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 70px; padding: 116px clamp(28px, 7vw, 110px) 118px; border-bottom: 4px solid rgba(17,17,20,.82); text-align: center; }
.team-hero::after { content: ""; position: absolute; right: -120px; bottom: 34px; width: 390px; height: 36px; background: var(--red); transform: rotate(-7deg); opacity: .94; }
.hero-photo { width: min(76%, 760px); }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.bare-hero-photo { margin: 0; border: 21px solid var(--ink); background: transparent; box-shadow: none; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy > p:last-child { max-width: 790px; margin: 27px 0 0; color: #383336; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.08rem, 2vw, 1.38rem); }
.pencil-note { position: absolute; top: 64px; left: 7%; color: var(--pencil); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.05rem; line-height: 1.2; transform: rotate(-7deg); }
.sketch-arrow { position: absolute; right: 8%; top: 120px; color: var(--red); font-family: Georgia, serif; font-size: 4.4rem; transform: rotate(-23deg); }

.photo-card { position: relative; margin: 0; padding: 13px 13px 54px; background: #fffdf8; box-shadow: var(--shadow); }
.photo-card.captionless { padding-bottom: 13px; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.03); }
.photo-card figcaption { position: absolute; right: 16px; bottom: 12px; left: 16px; overflow: hidden; color: #292326; font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: .95rem; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.tape { position: absolute; z-index: 2; width: 112px; height: 34px; background: var(--tape); box-shadow: 0 1px 1px rgba(85,55,20,.12); backdrop-filter: blur(1px); }
.tape-top { top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.tape-corner { top: 3px; right: -28px; transform: rotate(43deg); }
.rotate-left { transform: rotate(-2.1deg); }
.rotate-right { transform: rotate(2deg); }

.spread { padding: 105px clamp(28px, 7vw, 110px) 125px; border-bottom: 2px dashed rgba(57,46,37,.42); }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 70px; color: #443d37; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.section-label::after { content: ""; width: min(260px, 30vw); height: 2px; background: var(--red); }
.section-label span { display: grid; width: 38px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; letter-spacing: 0; }
.spread-heading { max-width: 950px; margin-bottom: 76px; }
.spread-heading h2 { max-width: 920px; }
.work-underline { text-decoration: underline; text-decoration-color: var(--red-dark); text-decoration-thickness: .11em; text-underline-offset: .22em; }

.owner-spread { min-height: 880px; display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto 1fr; gap: 30px clamp(38px, 8vw, 120px); align-items: center; }
.owner-spread .section-label { grid-column: 1 / -1; margin-bottom: 22px; }
.owner-copy { position: relative; z-index: 2; max-width: 560px; padding: 48px 48px 54px; background: var(--paper-light); border-left: 8px solid var(--red); box-shadow: 0 16px 36px rgba(54,37,24,.12); transform: rotate(-1deg); }
.owner-copy h2 { font-size: clamp(2.8rem, 5vw, 5rem); }
.owner-copy > p:not(.kicker):not(.handwritten) { margin: 24px 0 0; color: #3d3632; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; }
.owner-quote { margin: 34px 0; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2.1vw, 1.58rem); font-style: italic; font-weight: 700; line-height: 1.35; }
.owner-copy .handwritten { margin: 27px 0 0; color: var(--red-dark); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.08rem; font-weight: 700; transform: rotate(-2deg); }
.owner-photos { position: relative; min-height: 720px; display: grid; place-items: start end; }
.owner-portrait { z-index: 1; width: min(88%, 520px); }
.owner-portrait img { aspect-ratio: 4 / 5; object-position: center 46%; }
.cookout-photo { position: absolute; z-index: 3; top: 170px; bottom: auto; left: -7%; width: min(48%, 285px); }
.cookout-photo img { aspect-ratio: 4 / 5; object-position: center; }

.crew-spread { padding-bottom: 150px; }
.crew-collage { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: 34px 24px; }
.crew-collage .landscape img { aspect-ratio: 3 / 2; }
.crew-group { grid-column: 2 / 12; }
.crew-group img { aspect-ratio: 16 / 9 !important; object-position: center 55%; filter: saturate(1.08) contrast(1.05) brightness(1.03); }
.counter-cone { grid-column: 9 / 13; margin-top: 76px; }
.counter-cone img { object-position: center 44%; }
.counter-card { grid-column: 1 / 7; margin-top: 24px; }
.counter-card img { aspect-ratio: 16 / 10; filter: saturate(1.16) contrast(1.08) brightness(1.06) sepia(.025); }
.office-card { grid-column: 7 / 13; margin-top: 88px; }
.office-card img { aspect-ratio: 5 / 4 !important; object-position: center 46%; filter: saturate(1.06) contrast(1.05) brightness(1.02); }
.cap-card { grid-column: 1 / 6; margin-top: 24px; }
.cap-card img { aspect-ratio: 1 / 1 !important; object-position: center 42%; filter: saturate(1.06) contrast(1.04) brightness(.99); }
.counter-person-card { grid-column: 6 / 13; margin-top: 92px; }
.counter-person-card img { aspect-ratio: 4 / 3 !important; object-position: 54% 47%; filter: saturate(1.08) contrast(1.05) brightness(1.03); }

.compact-heading { max-width: 800px; }
.dallas-manager-card { position: absolute; z-index: 6; top: 205px; right: clamp(28px, 6vw, 95px); width: clamp(255px, 22vw, 310px); }
.dallas-manager-card img { height: auto; aspect-ratio: 2 / 3; object-position: center; filter: saturate(1.08) contrast(1.05) brightness(1.04); }
.dallas-manager-card figcaption { font-size: .86rem; }
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 42px 24px; align-items: start; }
.work-forklift-a { grid-column: 1 / 4; }
.work-forklift-b { grid-column: 10 / 13; margin-top: 250px; }
.work-forklift-a img, .work-forklift-b img { aspect-ratio: 4 / 5; filter: saturate(1.1) contrast(1.06) brightness(1.03); }
.yard-action-card { grid-column: 4 / 10; margin-top: 105px; }
.yard-action-card img { aspect-ratio: 3 / 2; object-position: center 36%; filter: saturate(1.1) contrast(1.06) brightness(1.04); }
.yard-crew-insets { position: relative; min-height: 690px; margin-top: -72px; }
.yard-crew-insets .photo-card { position: absolute; width: min(31%, 360px); }
.yard-crew-insets img { aspect-ratio: 3 / 4; filter: saturate(1.1) contrast(1.05) brightness(1.03); }
.yard-portrait-red { top: 105px; left: 3%; z-index: 2; }
.yard-portrait-red img { object-position: center 46%; }
.yard-portrait-bearded { top: 18px; left: 35%; z-index: 3; }
.yard-portrait-bearded img { object-position: center 44%; }
.yard-portrait-young { top: 128px; right: 3%; z-index: 1; }
.yard-portrait-young img { object-position: center 45%; }
.yard-portrait-young figcaption { font-size: .83rem; white-space: normal; }

.truck-spread { padding-bottom: 160px; }
.truck-heading { display: grid; grid-template-columns: 1fr .48fr; gap: 8px 55px; align-items: end; }
.truck-heading .kicker { grid-column: 1 / -1; }
.truck-heading > p:last-child { margin: 0 0 7px; color: #504945; font-family: Georgia, "Times New Roman", serif; }
.truck-collage { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: 34px; }
.truck-main { grid-column: 1 / 9; padding-bottom: 62px; }
.truck-main figcaption { white-space: normal; }
.truck-main img, .truck-profile img { aspect-ratio: 4 / 3; filter: saturate(1.1) contrast(1.06) brightness(1.04); }
.truck-profile { grid-column: 5 / 13; margin-top: 24px; }
.logo-crop { grid-column: 1 / 6; z-index: 2; margin-top: -210px; }
.crop-window { height: 300px; overflow: hidden; background: #d9dde1; }
.crop-window img { width: 100%; height: 100%; object-fit: cover; transform: scale(3.15); transform-origin: 20% 59%; filter: saturate(1.08) contrast(1.08); }
.yard-load-card { grid-column: 3 / 11; margin-top: 78px; }
.yard-load-card img { aspect-ratio: 16 / 9; object-position: 52% 43%; filter: saturate(1.12) contrast(1.07) brightness(1.05); }
.materials-heading { max-width: 900px; margin-top: 118px; }
.materials-heading h2 { max-width: 860px; }
.materials-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px; margin-top: 64px; align-items: start; }
.materials-grid .detail-card { width: 88%; margin-inline: auto; }
.materials-grid .detail-card img { aspect-ratio: 3 / 2; }
.materials-grid > :nth-child(2) { margin-top: 60px; }

.team-cta { padding: 105px clamp(28px, 7vw, 110px) 112px; background: var(--ink); color: #fff; text-align: center; }
.team-cta::before { content: ""; position: absolute; top: 0; left: 50%; width: 180px; height: 8px; transform: translateX(-50%); background: var(--red); }
.team-cta h2 { font-size: clamp(2.8rem, 6vw, 6.1rem); }
.team-cta > p:not(.kicker) { margin: 22px 0 0; color: #c4c4c7; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.team-cta .kicker { color: #ff767b; }
.cta-actions a { min-width: 210px; padding: 14px 22px; background: var(--red-dark); border: 2px solid var(--red-dark); color: #fff; font-weight: 900; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.cta-actions .secondary { background: transparent; }
.cta-actions a:hover, .cta-actions a:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.team-cta small { display: block; margin-top: 42px; color: #a2a2a7; }

.preview-footer { width: min(100%, 1440px); min-height: 145px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 30px; padding: 30px; background: #080809; color: #a2a2a7; }
.preview-footer img { width: 135px; height: auto; padding: 9px; background: #fff; }
.preview-footer p { margin: 0; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 1240px) {
  .dallas-manager-card { position: relative; top: auto; right: auto; width: min(42%, 340px); margin: -38px 0 58px auto; }
}

@media (max-width: 900px) {
  .preview-header { grid-template-columns: 150px 1fr; }
  .preview-heading { justify-content: flex-end; }
  .back-link { display: none; }
  .team-hero { min-height: auto; padding-top: 115px; }
  .hero-photo { width: min(94%, 620px); }
  .pencil-note { top: 48px; }
  .sketch-arrow { display: none; }
  .owner-spread { grid-template-columns: 1fr; }
  .owner-spread .section-label { grid-column: auto; }
  .owner-copy { max-width: 670px; }
  .owner-photos { width: min(100%, 680px); min-height: 0; margin: 26px auto 0; gap: 34px; align-items: start; }
  .owner-portrait { width: min(82%, 520px); justify-self: end; }
  .cookout-photo { position: relative; inset: auto; width: min(46%, 290px); justify-self: start; }
  .crew-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-collage > * { grid-column: auto !important; margin-top: 0 !important; }
  .crew-collage .crew-group, .crew-collage .counter-card, .crew-collage .counter-person-card { grid-column: 1 / -1 !important; }
  .dallas-manager-card { position: relative; top: auto; right: auto; width: min(58%, 340px); margin: -28px 0 58px auto; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid > * { grid-column: auto; width: min(100%, 680px); margin: 0 auto !important; }
  .work-forklift-a, .work-forklift-b { width: min(78%, 440px) !important; }
  .yard-crew-insets { min-height: 610px; margin-top: 10px; }
  .yard-crew-insets .photo-card { width: min(32%, 300px); }
  .truck-heading { grid-template-columns: 1fr; }
  .truck-collage { gap: 24px; }
  .truck-main { grid-column: 1 / 13; }
  .truck-profile { grid-column: 3 / 13; }
  .logo-crop { grid-column: 1 / 7; margin-top: -130px; }
  .yard-load-card { grid-column: 1 / 13; }
  .crop-window img { transform-origin: 0% 59%; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .preview-header { min-height: 80px; grid-template-columns: 130px 1fr; padding-inline: 18px; }
  .preview-brand { width: 126px; min-height: 55px; }
  .preview-brand img { height: 43px; }
  .preview-badge { font-size: .62rem; text-align: center; }
  .team-hero { gap: 48px; padding: 92px 20px 76px; }
  h1 { font-size: clamp(2.85rem, 14vw, 4.5rem); }
  h2 { font-size: clamp(2.15rem, 12vw, 3.7rem); }
  .pencil-note { left: 23px; font-size: .9rem; }
  .photo-card { padding: 9px 9px 45px; }
  .photo-card figcaption { font-size: .9rem; }
  .spread { padding: 78px 20px 90px; }
  .section-label { margin-bottom: 50px; font-size: .65rem; letter-spacing: .1em; }
  .section-label::after { flex: 1; }
  .owner-copy { padding: 36px 27px 42px; }
  .owner-photos { min-height: 0; gap: 30px; }
  .owner-portrait { width: 88%; }
  .cookout-photo { width: 58%; }
  .spread-heading { margin-bottom: 52px; }
  .dallas-manager-card { width: 88%; margin: -8px 0 52px auto; }
  .crew-collage { grid-template-columns: 1fr; gap: 42px; }
  .crew-collage .counter-card { grid-column: auto !important; }
  .crew-collage > * { width: 100%; }
  .crew-collage > :nth-child(even) { margin-left: auto !important; }
  .work-grid { gap: 46px; }
  .work-grid > * { width: 100% !important; margin: 0 !important; }
  .yard-crew-insets { min-height: 0; display: grid; gap: 36px; margin-top: 62px; }
  .yard-crew-insets .photo-card { position: relative; inset: auto; width: 88%; }
  .yard-crew-insets > :nth-child(even) { margin-left: auto; }
  .truck-collage { display: grid; grid-template-columns: 1fr; gap: 44px; }
  .truck-collage > * { grid-column: auto; margin: 0; }
  .truck-profile { width: 94%; margin-left: auto; }
  .logo-crop { width: 78%; margin-top: -28px; }
  .crop-window { height: 230px; }
  .materials-grid { grid-template-columns: 1fr; gap: 46px; }
  .materials-grid .detail-card { width: 100%; margin: 0; }
  .materials-grid > :nth-child(2) { margin-top: 0; }
  .preview-footer { flex-direction: column; gap: 14px; text-align: center; }
  .rotate-left, .rotate-right { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}