/* ==========================================================================
   Taylor Rubber — Brand v2 layer
   Source of truth: Paper file "Taylor" → "Landing Page — UI v2 (Brand v2 · Orange)"
   and the Foundation Sheet "Brand v2" section (client-approved, Oct 2026).

   Loaded AFTER styles.css. Re-points the global tokens to Brand v2 and adds
   the blocks UI v2 introduced (accent headline lines, v2 PDF thumbnails,
   Product Guides). Remove this file + its <link> to fall back to UI v1.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --color-orange: #F26B1D;
  --color-orange-deep: #D9560E;
  --color-royal: #1A3FA8;
  --color-royal-mid: #13308A;

  /* Brand gradient becomes royal → navy deep (hero, quality, CTA band, case visuals) */
  --gradient-brand: linear-gradient(120deg, var(--color-royal) 0%, var(--color-royal-mid) 45%, var(--color-navy-deep) 100%);

  /* Primary CTA is orange now */
  --color-cta-navy: var(--color-orange);

  --font-impact: "Barlow Semi Condensed", "Arial Narrow", "Inter", sans-serif;
}

/* ---------- 2. Shared ---------- */
.eyebrow {
  --eyebrow-color: var(--color-navy);
  --eyebrow-rule: var(--color-orange);
}

.eyebrow::before {
  width: 28px;
  height: 4px;
}

.eyebrow--inverse {
  --eyebrow-color: var(--color-on-dark-soft);
  --eyebrow-rule: var(--color-orange);
}

/* Big condensed uppercase headline, used across every section title */
.section-head__title,
.hero__title,
.cta-band__title {
  font-family: var(--font-impact);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.section-head__title {
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 0.95;
}

/* Second headline line picked out in orange (the PDF move) */
.accent-line {
  display: block;
  color: var(--color-orange);
}

.button--cta {
  --button-bg: var(--color-orange);
  --button-bg-hover: var(--color-orange-deep);
  --cursor-stroke: var(--color-orange-deep);
}

/* ---------- 3. Hero ---------- */
.hero {
  --hero-title-size: 64px;
  --hero-title-leading: 60px;
}

.hero__title-line {
  display: block;
}

.hero__title::after {
  content: "";
  display: block;
  width: 140px;
  height: 6px;
  margin-top: 20px;
  background: var(--color-orange);
}

.hero__badge-dot,
.hero__stats-rule {
  background: var(--color-orange);
}

.stats__value {
  font-family: var(--font-impact);
  font-size: 48px;
  line-height: 48px;
  color: var(--color-orange);
}

.lead-form__title {
  font-family: var(--font-impact);
  font-size: 30px;
  font-weight: 800;
  line-height: 32px;
  text-transform: uppercase;
}

/* ---------- 4. Product Guides (new in UI v2) ---------- */
.guides {
  background: var(--color-ground-tint);
}

.guides__inner {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

.guides__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.guide-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-ground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s ease;
}

.guide-card:hover {
  box-shadow: 0 20px 40px -24px rgba(0, 32, 96, 0.3);
}

.guide-card__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.guide-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}

.guide-card:hover .guide-card__image {
  transform: scale(1.03);
}

.guide-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 32px;
}

.guide-card__eyebrow {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  line-height: 16px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-orange-deep);
}

.guide-card__title {
  margin-top: 12px;
  font-family: var(--font-impact);
  font-size: 38px;
  font-weight: 800;
  line-height: 38px;
  text-transform: uppercase;
  color: var(--color-navy);
}

.guide-card__text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 26px;
}

.guide-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.guide-card__chip {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 16px;
  color: var(--color-navy);
  background: var(--color-ground-tint);
  border-radius: var(--radius-pill);
}

.guide-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}

/* ---------- 5. Component cards ---------- */
.industry-card {
  --card-eyebrow: var(--color-orange-deep);
}

.industry-card__title,
.case-card__title {
  font-family: var(--font-impact);
  font-size: 28px;
  font-weight: 800;
  line-height: 28px;
  text-transform: uppercase;
}

/* v2 PDF thumbnail: a mini 16:9 cover in the PDF style */
.brief {
  grid-template-columns: 132px minmax(0, 1fr);
}

.brief__thumb {
  display: grid;
  grid-template-columns: 80px 52px; /* wide enough for "CONSTRUCTION" on one line */
  width: 132px;
  height: 74px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--color-royal) 0%, var(--color-navy-deep) 100%);
  border-radius: var(--radius-4);
  box-shadow: 0 4px 12px rgba(0, 20, 63, 0.25);
}

.brief__thumb-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px 2px 8px 8px;
}

.brief__thumb-oval {
  width: 22px;
  height: 9px;
  border: 1px solid var(--color-on-dark);
  border-radius: 50%;
}

.brief__thumb-title {
  font-family: var(--font-impact);
  font-size: 10px;
  font-weight: 800;
  line-height: 10px;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.brief__thumb-title .accent-line::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-top: 4px;
  background: var(--color-orange);
}

.brief__thumb-image {
  width: 52px;
  height: 74px;
  object-fit: cover;
}

/* ---------- 6. Case studies ---------- */
.case-card__eyebrow {
  color: var(--color-orange-deep);
}

.case-card__headline {
  font-family: var(--font-impact);
  font-size: 32px;
  font-weight: 800;
  line-height: 30px;
  text-transform: uppercase;
}

.case-card__link-arrow {
  background: var(--color-orange);
}

/* ---------- 7. Process / work steps / CTA band ---------- */
/* Sizes match Paper UI v2 (2026-10-22) */
.process-step__title,
.work-step__title {
  font-family: var(--font-impact);
  font-size: 24px;
  font-weight: 800;
  line-height: 26px;
  text-transform: uppercase;
}

.process-step__number {
  font-family: var(--font-impact);
  font-size: 32px;
  font-weight: 800;
  line-height: 40px;
}

.quality-cta__title {
  font-family: var(--font-impact);
  font-size: 22px;
  font-weight: 800;
  line-height: 24px;
  text-transform: uppercase;
}

.portfolio-mockup__cover {
  background: linear-gradient(160deg, var(--color-royal) 0%, var(--color-navy-deep) 100%);
}

.portfolio-mockup__title {
  font-family: var(--font-impact);
  font-size: 18px;
  font-weight: 800;
  line-height: 20px;
  text-transform: uppercase;
}

.cta-band__title {
  font-size: clamp(42px, 5vw, 60px);
  line-height: 0.95;
}

.cta-band .button--light {
  --button-bg: var(--color-orange);
  --button-bg-hover: var(--color-orange-deep);
  --button-color: var(--color-on-dark);
  --cursor-fill: var(--color-on-dark);
  --cursor-stroke: var(--color-orange-deep);
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 1280px) {
  .hero {
    --hero-title-size: 56px;
    --hero-title-leading: 54px;
  }
}

@media (max-width: 760px) {
  .guides__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .hero {
    --hero-title-size: 46px;
    --hero-title-leading: 44px;
  }

  .stats__value {
    font-size: 34px;
    line-height: 36px;
  }

  .guide-card__body {
    padding: 22px;
  }

  .guide-card__title {
    font-size: 30px;
    line-height: 30px;
  }

  .guide-card__actions .button {
    width: 100%;
  }

  .industry-card__title,
  .case-card__title {
    font-size: 24px;
    line-height: 24px;
  }

  .brief {
    grid-template-columns: minmax(0, 1fr);
  }
}