/* ============================================================
   BRAND LOCKUP
   The supplied artwork, placed — not redrawn. Navy ink, so it
   always needs a light ground under it.
   ============================================================ */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--c-ink); }

.brand__mark {
  flex: none; display: block;
  height: 46px; width: auto;
  transition: opacity .2s var(--ease);
}
.brand:hover .brand__mark { opacity: .82; }

.brand__type { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Letterspaced light sans, matching the artwork rather than the
   display serif used for headings. */
.brand__name {
  font-family: var(--f-ui);
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-navy-deep);
}

/* PREMIUM WATCHES between two hairlines, as drawn. */
.brand__tag {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-ui);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-steel);
  white-space: nowrap;
}
.brand__tag i {
  flex: 1 1 auto; min-width: 8px; height: 1px;
  background: currentColor; opacity: .6;
}

/* ------------------------------------------------------------
   Dark surfaces: the footer and the drawer header.
   The mark is navy line art — inverting it to white leaves the
   thin strokes almost invisible, so instead it keeps its own
   colour and sits on a light plate.
   ------------------------------------------------------------ */
.site-footer .brand,
.drawer__head .brand {
  background: var(--c-white);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
}
.site-footer .brand__lockup {
  display: block;
  height: auto; width: 100%; max-width: 230px;
}
.drawer__head .brand__name { font-size: 1.08rem; color: var(--c-navy-deep); }
.drawer__head .brand__mark { height: 34px; }

@media (max-width: 1024px) {
  .brand__mark { height: 40px; }
  .brand__name { font-size: 1.12rem; letter-spacing: .14em; }
  .brand__tag { font-size: 7.5px; letter-spacing: .24em; }
}
@media (max-width: 420px) {
  .brand__tag { display: none; }
  .brand { gap: var(--s-2); }
  .brand__mark { height: 34px; }
}