/* BTP Wholesale Trailer Parts: site styles, loaded after Bootstrap 5.3.8

   Layout and the grid are standard Bootstrap. This file:
     1. sets the brand tokens and maps them into Bootstrap's own variables
     2. sets the type (Barlow, one family for headings and body)
     3. restyles Bootstrap buttons, navbar and breadcrumb
     4. adds the site's own components, listed below

   Palette
     --ink    #0b1a28  hero, footer, dark panels
     --navy   #102a43  type approval band
     --blue   #0054a4  the blue from BTP's logo: buttons, links, icons
     --red    #c8161d  the red "TRADE ONLY" panel from BTP's signage.
                       Used only for the Trade only badge.
     --paper  #f3f5f8  alternate section background

   Components
     .section           standard vertical rhythm for a page section
     .on-dark           white text for anything on --ink, --navy or --blue
     .eyebrow           small uppercase label above a heading
     .trade-badge       the red Trade only badge, after BTP's signage
     .topbar .site-header .brand-lockup   header
     .hero .hero-copy .hero-media         home page hero
     .page-hero                           inner page hero
     .brand-strip .brand-grid .brand-logo supplier logos
     .feature-card .icon-tile             reasons grid
     .approval-list                       type approval list
     .media-frame .media-badge            photo with a stat badge
     .stat-grid .stat                     numbers
     .cta .cta-panel .customer-list       contact band
     .contact-card .panel .pill .notice   contact page
     .site-footer                         footer
*/


/* 1. Tokens ------------------------------------------------------------------ */

:root {
  --ink: #0b1a28;
  --navy: #102a43;
  --blue: #0054a4;
  --blue-dark: #003b76;
  --blue-light: #8fc1f0;
  --blue-tint: #e7f0f9;
  --red: #c8161d;
  --paper: #f3f5f8;
  --line: #dfe5eb;
  --text: #13222f;
  --muted: #4f6072;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(11, 26, 40, .05), 0 2px 8px rgba(11, 26, 40, .05);
  --shadow: 0 2px 4px rgba(11, 26, 40, .04), 0 16px 40px rgba(11, 26, 40, .12);

  --bs-primary: #0054a4;
  --bs-primary-rgb: 0, 84, 164;
  --bs-body-font-family: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #13222f;
  --bs-body-color-rgb: 19, 34, 47;
  --bs-emphasis-color: #0b1a28;
  --bs-emphasis-color-rgb: 11, 26, 40;
  --bs-secondary-color: #4f6072;
  --bs-secondary-rgb: 79, 96, 114;
  --bs-border-color: #dfe5eb;
  --bs-link-color: #0054a4;
  --bs-link-color-rgb: 0, 84, 164;
  --bs-link-hover-color: #003b76;
  --bs-link-hover-color-rgb: 0, 59, 118;
  --bs-focus-ring-color: rgba(0, 84, 164, .35);
  --bs-border-radius: 6px;
}

html { scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

a:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid #4d9be6;
  outline-offset: 3px;
  box-shadow: none;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 1100;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  border-radius: var(--radius);
}


/* 2. Type -------------------------------------------------------------------- */

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem); line-height: 1.02; }
h2, .h2 { font-size: clamp(1.875rem, 1.4rem + 1.9vw, 3rem); line-height: 1.06; }
h3, .h3 { font-size: clamp(1.25rem, 1.15rem + .4vw, 1.5rem); line-height: 1.2; }
h4, .h4 { font-size: 1.1875rem; line-height: 1.3; }
h5, .h5 { font-size: 1.0625rem; line-height: 1.35; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); font-weight: 400; line-height: 1.55; }
small, .small { font-size: .875rem; }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--blue);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* White text on the dark and blue backgrounds */
.on-dark { color: rgba(255, 255, 255, .8); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .h3 { color: #fff; }
.on-dark .eyebrow { color: var(--blue-light); }
.on-dark .text-secondary { color: rgba(255, 255, 255, .72) !important; }

/* The red Trade only panel from BTP's signage */
.trade-badge {
  display: inline-block;
  padding: .45em .75em .4em;
  background: var(--red);
  color: #fff;
  font-size: .8125rem;
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}
.trade-badge--sm { font-size: .6875rem; }


/* 3. Spacing ----------------------------------------------------------------- */

.section { padding-block: 4rem; }
@media (min-width: 768px) { .section { padding-block: 5.5rem; } }
@media (min-width: 1200px) { .section { padding-block: 7rem; } }

/* Bootstrap's spacing stops at 5 (3rem). Same naming, one more step. */
.pt-6 { padding-top: 4rem !important; }
.pb-6 { padding-bottom: 4rem !important; }
.mt-6 { margin-top: 4rem !important; }
.gy-6 { --bs-gutter-y: 4rem; }
@media (min-width: 992px) {
  .pb-lg-6 { padding-bottom: 4rem !important; }
}

.bg-paper { background-color: var(--paper); }
.bg-navy { background-color: var(--navy); }


/* 4. Bootstrap components ---------------------------------------------------- */

.btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .75rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
}
.btn-lg {
  --bs-btn-padding-x: 1.625rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-border-radius: var(--radius);
}
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-dark);
  --bs-btn-hover-border-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-dark);
  --bs-btn-active-border-color: var(--blue-dark);
}
.on-dark .btn-primary {
  --bs-btn-hover-bg: #1a6fc2;
  --bs-btn-hover-border-color: #1a6fc2;
  --bs-btn-active-bg: #1a6fc2;
  --bs-btn-active-border-color: #1a6fc2;
}
.btn-light {
  --bs-btn-color: var(--blue-dark);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--blue-dark);
  --bs-btn-hover-bg: var(--blue-tint);
  --bs-btn-hover-border-color: var(--blue-tint);
  --bs-btn-active-color: var(--blue-dark);
  --bs-btn-active-bg: var(--blue-tint);
  --bs-btn-active-border-color: var(--blue-tint);
}
.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .4);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: #fff;
}

.btn-arrow .bi,
.link-arrow .bi,
.contact-card-action .bi { transition: transform .2s ease; }
.btn-arrow:hover .bi-arrow-right,
.link-arrow:hover .bi-arrow-right,
a.contact-card:hover .bi-arrow-right { transform: translateX(4px); }
.btn-arrow:hover .bi-arrow-up-right { transform: translate(2px, -2px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 1.75rem;
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, .4);
  --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .7);
  font-size: .9375rem;
}
.breadcrumb a { color: #fff; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }


/* 5. Header ------------------------------------------------------------------ */

.topbar {
  background: var(--ink);
  color: rgba(255, 255, 255, .8);
  font-size: .875rem;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

.site-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .2s ease;
  /* Keeps the pinned header on its own layer at all times. Without this the
     browser re-rasterises it when scrolling starts and stops, and because the
     header sits on a half pixel the nav text jumps up or down by one pixel on
     the next hover. Don't remove without re-testing that. */
  will-change: transform;
}
.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(11, 26, 40, .1); }

.site-header .navbar {
  --bs-navbar-padding-y: .625rem;
  --bs-navbar-color: var(--text);
  --bs-navbar-hover-color: var(--blue);
  --bs-navbar-active-color: var(--blue);
  --bs-navbar-nav-link-padding-x: 1rem;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 1rem;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
}
.brand-lockup:hover { color: var(--ink); }
.brand-lockup img { width: 56px; height: auto; }
.brand-name {
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.05;
}
.brand-name small {
  margin-top: .2rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.header-call { --bs-btn-padding-x: .875rem; --bs-btn-padding-y: .625rem; min-height: 2.75rem; }

.navbar-toggler {
  padding: .4rem .6rem;
  border-color: var(--line);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}
.navbar-toggler:focus { box-shadow: none; }

.site-header .nav-link { font-weight: 600; }

@media (max-width: 991.98px) {
  .site-header .navbar-collapse { margin-top: .625rem; border-top: 1px solid var(--line); }
  .site-header .nav-link { padding-block: .875rem; border-bottom: 1px solid var(--line); }
  .site-header .nav-item:last-child .nav-link { border-bottom: 0; }
}

@media (min-width: 400px) {
  .brand-lockup img { width: 64px; }
}

@media (min-width: 992px) {
  .site-header .navbar { --bs-navbar-padding-y: .875rem; }
  .brand-lockup img { width: 76px; }
  .brand-name { font-size: 1.25rem; }
  .header-call { --bs-btn-padding-x: 1.25rem; }
  .site-header .nav-link { position: relative; }
  .site-header .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .125rem;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .site-header .nav-link.active::after,
  .site-header .nav-link:hover::after { transform: scaleX(1); }
}


/* 6. Heroes ------------------------------------------------------------------ */

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(70% 90% at 0% 0%, rgba(0, 84, 164, .38), transparent 65%);
}

.hero-copy { padding-block: 3.5rem 3rem; }
.hero .lead { max-width: 36rem; }

.hero-media { position: relative; aspect-ratio: 4 / 3; }
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 60%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(11, 26, 40, 0) 28%);
}

.check-list {
  display: grid;
  gap: .625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  color: #fff;
}
.check-list li { display: flex; align-items: flex-start; gap: .5rem; }
.check-list .bi { color: var(--blue-light); font-size: 1.125rem; line-height: 1.4; }

@media (min-width: 768px) {
  .check-list--inline { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
  .hero-media { aspect-ratio: 16 / 9; }
}

@media (min-width: 992px) {
  .hero-copy { padding-block: 6rem 5.5rem; }
  .hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 44%;
    aspect-ratio: auto;
  }
  .hero-media::after {
    background: linear-gradient(90deg, var(--ink) 0%, rgba(11, 26, 40, .55) 22%, rgba(11, 26, 40, 0) 55%);
  }
}

.page-hero { padding-block: 3rem 3.5rem; }

/* The contact cards straddle the join, with the dark hero behind their top
   half, so the dark ends mid-card instead of at some arbitrary point.
   The overlap is half a card plus the row's gutter, which pushes the cards
   down: 112 + 16 on phones, 128 + 16 from md, 116 + 24 from lg (cards are
   224 / 256 / 231px, gutters g-3 then g-lg-4). The hero's padding-bottom
   carries the same amount, so the space between the hero text and the cards
   doesn't change. Re-measure both if the cards ever change height. */
.page-hero--overlap { padding-bottom: 10.5rem; }
.overlap-up { position: relative; margin-top: -8rem; }
@media (min-width: 768px) {
  .page-hero--overlap { padding-bottom: 11.5rem; }
  .overlap-up { margin-top: -9rem; }
}
@media (min-width: 992px) {
  .page-hero { padding-block: 4.5rem 5.5rem; }
  .page-hero--overlap { padding-bottom: 12.25rem; }
  .overlap-up { margin-top: -8.75rem; }
}


/* 7. Brands ------------------------------------------------------------------ */

.brand-strip { background: #fff; border-bottom: 1px solid var(--line); }
.brand-strip-title {
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.brand-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.5rem;
  background: #fff;
}
.brand-logo {
  width: 100%;
  max-width: 10rem;
  height: 3.25rem;
  object-fit: contain;
}

/* Borderless strip under the home hero */
.brand-grid--plain { gap: 0; background: none; border: 0; border-radius: 0; }
.brand-grid--plain li { min-height: 4.5rem; padding: .75rem 1rem; }
.brand-grid--plain .brand-logo { max-width: 8.5rem; height: 2.5rem; }

@media (min-width: 576px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .brand-grid { grid-template-columns: repeat(6, 1fr); }
}


/* 8. Cards, lists and stats -------------------------------------------------- */

.icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 1.375rem;
  border-radius: var(--radius);
}
.icon-tile--dark { background: rgba(255, 255, 255, .1); color: var(--blue-light); }

.feature-card {
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feature-card h3 { margin-bottom: .5rem; font-size: 1.1875rem; }
.feature-card p { margin: 0; color: var(--muted); }
@media (min-width: 1200px) { .feature-card { padding: 2rem; } }

.approval-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.approval-list li {
  display: flex;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.approval-list .icon-tile { margin-bottom: 0; }
.approval-list h3 { margin-bottom: .25rem; font-size: 1.1875rem; }
.approval-list p { margin: 0; }

.media-frame { position: relative; }
.media-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.media-badge {
  position: absolute;
  left: 1rem;
  bottom: -1.75rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.25rem;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: .875rem;
  line-height: 1.25;
}
.media-badge strong {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 1200px) {
  .media-frame .media-badge { left: -1.5rem; }
  /* Flush with the image's right edge, so it lines up with the stats below */
  .media-frame--right .media-badge { left: auto; right: 0; }
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { padding: 1.25rem 1.25rem 1.375rem; background: #fff; }
.stat-value {
  display: block;
  margin-bottom: .375rem;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.stat-value small { font-size: .5em; letter-spacing: 0; }
.stat-label { display: block; color: var(--muted); font-size: .9375rem; line-height: 1.35; }

@media (min-width: 576px) {
  .stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .stat-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid--3 .stat-value { font-size: 1.75rem; }
}
@media (min-width: 992px) {
  .stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .stat-grid--4 .stat { padding: 1.75rem 2rem; }
  .stat-grid--4 .stat-value { font-size: 2.75rem; }
}

.customer-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
}

.notice {
  display: flex;
  gap: .875rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
}
.notice .bi { color: var(--blue); font-size: 1.25rem; line-height: 1.5; }


/* Customer reviews */
.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.review-stars { display: inline-flex; gap: .2rem; color: #f5a70a; font-size: 1.125rem; line-height: 1; }
.review-source { flex: none; width: 1.25rem; height: 1.25rem; }
.review-card blockquote { margin: 0 0 1.5rem; }
.review-card blockquote p { margin: 0; color: var(--text); font-size: 1.0625rem; line-height: 1.55; }
.review-author {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.review-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: .9375rem;
  font-weight: 700;
  border-radius: 50%;
}
.review-name { display: block; color: var(--ink); font-weight: 700; line-height: 1.3; }
.review-detail { display: block; color: var(--muted); font-size: .875rem; line-height: 1.3; }


/* 9. Contact band ------------------------------------------------------------ */

.cta { position: relative; overflow: hidden; isolation: isolate; background: var(--blue); }
.cta::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent);
}
.cta.on-dark { color: rgba(255, 255, 255, .88); }
.cta .eyebrow { color: #fff; }

.cta-panel {
  padding: 1.75rem;
  background: rgba(11, 26, 40, .22);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius);
}
.cta-label {
  margin-bottom: .375rem;
  color: rgba(255, 255, 255, .75);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cta-phone,
.cta-email {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cta-phone {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: 1.1;
}
.cta-phone .bi { font-size: .7em; }
.cta-email { font-size: 1.125rem; }
.cta-phone:hover,
.cta-email:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

.cta-footer {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.customer-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  list-style: none;
}
.customer-list li {
  padding: .3rem .875rem;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
}


/* 10. Contact page ------------------------------------------------------------ */

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
a.contact-card:hover { border-color: var(--blue); box-shadow: var(--shadow); color: var(--text); }
.contact-card-label {
  margin-bottom: .25rem;
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-card-value {
  color: var(--ink);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
.contact-card-action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.25rem;
  color: var(--blue);
  font-weight: 700;
}

.contact-card--primary { background: var(--blue); border-color: var(--blue); }
a.contact-card--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.contact-card--primary .contact-card-label { color: rgba(255, 255, 255, .75); }
.contact-card--primary .contact-card-value,
.contact-card--primary .contact-card-action { color: #fff; }
.contact-card--primary .icon-tile { background: rgba(255, 255, 255, .16); color: #fff; }

.panel { height: 100%; padding: 1.75rem; border-radius: var(--radius); }
.panel-paper { background: var(--paper); }
.panel-ink { background: var(--ink); }
@media (min-width: 768px) { .panel { padding: 2.5rem; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-size: .875rem;
  font-weight: 700;
  border-radius: 999px;
}
.panel .trade-badge { display: table; }
.address-icon { color: var(--blue); font-size: 1.25rem; line-height: 1.4; }
address strong { color: var(--ink); }


/* 11. Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
  font-size: .9375rem;
}
.site-footer a { color: rgba(255, 255, 255, .92); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-logo {
  display: inline-block;
  padding: .5rem .625rem;
  background: #fff;
  border-radius: var(--radius);
}
.footer-logo img { display: block; width: 83px; height: auto; }
.footer-heading {
  margin-bottom: 1.125rem;
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-list li { display: flex; gap: .625rem; margin-bottom: .75rem; }
.footer-list .bi { color: var(--blue-light); line-height: 1.6; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  font-size: .875rem;
}


/* 12. Motion and print --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .topbar, .cta, .navbar-toggler, .header-call { display: none !important; }
  .site-header { position: static; box-shadow: none; }
  .hero, .page-hero, .site-footer, .panel-ink, .bg-navy { background: #fff !important; }
  .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .site-footer, .site-footer a { color: #000 !important; }
  .hero-media { display: none; }
}