/* Staging R1: keep the approved header visually stable before hydration. */

/*
 * The owner-approved navigation typeface is the sole site typeface. Keeping
 * this override in the first-paint sheet prevents any serif-to-sans swap while
 * route CSS and hydrated components initialize.
 */
:root {
  --serif: var(--sans) !important;
}

.site-shell,
.site-shell :where(*),
.site-shell :where(*)::before,
.site-shell :where(*)::after,
.ajvg-dialog,
.ajvg-dialog :where(*),
.ajvg-dialog :where(*)::before,
.ajvg-dialog :where(*)::after {
  font-family: var(--sans) !important;
}

.header-search-button {
  display: none !important;
}

.site-nav {
  gap: clamp(22px, 2.7vw, 42px);
}

/*
 * Carry the announcement-bar wine colour through the navigation header. Keep
 * the collections flyout on its existing ivory surface and retain the green
 * WhatsApp action as the single bright accent.
 */
.site-header {
  border-bottom-color: rgba(246, 241, 232, .18) !important;
  background: var(--oxblood, #5d2024) !important;
}

/* Restore the original cream announcement strip above the wine navigation. */
.announcement {
  border-bottom: 1px solid var(--line, #d8cfc1) !important;
  background: var(--ivory, #f6f1e8) !important;
  color: var(--oxblood, #5d2024) !important;
}

.site-header .brand-link,
.site-header .brand-mark,
.site-header .brand-header-tagline,
.site-header .site-nav > a:not(.nav-appointment),
.site-header .nav-trigger {
  color: var(--ivory, #f6f1e8) !important;
}

.site-header .brand-header-tagline::before,
.site-header .site-nav > a:not(.nav-appointment)::after,
.site-header .nav-trigger::after {
  background: #d7b785 !important;
}

.site-header .nav-trigger > span {
  color: #d7b785 !important;
}

/*
 * Keep Collections as one visual navigation item while separating its two
 * actions: the label opens the canonical catalogue and the original button
 * continues to control the existing flyout.
 */
.site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .aj-collections-link {
  z-index: 1;
  position: relative;
  padding: 12px 0;
  color: var(--ivory, #f6f1e8) !important;
  line-height: normal;
  white-space: nowrap;
  transition: color 180ms ease;
}

.site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .nav-trigger {
  min-width: 28px;
  min-height: 44px;
  justify-content: center;
  gap: 0;
  padding: 12px 0 12px 8px;
}

.site-header .menu-toggle span:not(.sr-only) {
  background: var(--ivory, #f6f1e8) !important;
}

@media (width > 760px) {
  .site-header {
    justify-content: flex-start;
  }

  .site-header .site-nav {
    margin-left: auto;
  }

  .site-header .header-tools {
    display: none;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] {
    display: inline-flex;
    align-items: center;
  }
}

/*
 * The frozen markup says "Videos & Reels" until the polish runtime settles.
 * Preserve the accessible source text while rendering the approved short label
 * consistently before and after hydration.
 */
.site-header .site-nav > a[href="/videos"] {
  font-size: 0;
}

.site-header .site-nav > a[href="/videos"]::before {
  content: "Videos";
  font-size: 14px;
}

/*
 * Render the approved circular WhatsApp action from the first paint. The real
 * link remains present and accessible; the existing runtime still updates its
 * destination, label and tracking attributes after hydration.
 */
.site-header .nav-appointment {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid #128c4b;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  font-size: 0;
  line-height: 0;
  box-shadow: 0 6px 18px rgba(18, 140, 75, .18);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.site-header .nav-appointment::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.5 3.49A11.8 11.8 0 0 0 12.07 0C5.52 0 .19 5.33.19 11.88c0 2.09.55 4.13 1.59 5.93L.09 24l6.34-1.66a11.87 11.87 0 0 0 5.63 1.43h.01c6.55 0 11.88-5.33 11.88-11.88 0-3.18-1.22-6.16-3.45-8.4Zm-8.43 18.27h-.01a9.85 9.85 0 0 1-5.03-1.38l-.36-.21-3.76.99 1-3.67-.24-.38a9.82 9.82 0 0 1-1.5-5.23c0-5.46 4.45-9.9 9.91-9.9a9.84 9.84 0 0 1 7 2.9 9.83 9.83 0 0 1 2.9 7.01c0 5.46-4.45 9.9-9.91 9.9Zm5.43-7.43c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.25-.46-2.38-1.47a8.96 8.96 0 0 1-1.65-2.06c-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.88 1.21 3.08.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.19 1.87.12.57-.08 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.41-.07-.13-.27-.2-.57-.35Z'/%3E%3C/svg%3E");
}

.site-header .nav-appointment > svg {
  display: none;
}

.site-header .nav-appointment:hover,
.site-header .nav-appointment:focus-visible {
  border-color: #0d703b;
  background: #1fbd5a;
  color: #fff;
  transform: translateY(-1px);
}

/*
 * Magnetic pill navigation adapted from the owner-approved Claude treatment.
 * The wine header and inactive ivory labels stay unchanged; the active or
 * previewed destination moves onto a cream pill with wine text.
 */
@media (width > 760px) {
  .site-header .site-nav {
    position: relative;
    isolation: isolate;
  }

  .site-header .site-nav > a:not(.nav-appointment),
  .site-header .site-nav > .nav-dropdown > .nav-trigger,
  .site-header .site-nav > .nav-dropdown > .aj-collections-link {
    z-index: 1;
    isolation: isolate;
    border-radius: 999px;
    transition: color 180ms ease;
  }

  .site-header .site-nav > .nav-dropdown,
  .site-header .site-nav > .nav-appointment {
    z-index: 1;
  }

  .site-header .site-nav > a:not(.nav-appointment)::after,
  .site-header .site-nav > .nav-dropdown > .nav-trigger::after {
    display: none;
  }

  /* First-paint fallback before the small positioning script settles. */
  .site-header .site-nav:not(.aj-pill-nav) > a.active:not(.nav-appointment),
  .site-header .site-nav:not(.aj-pill-nav) > .nav-dropdown > .nav-trigger.active {
    background: transparent;
    box-shadow: none;
    color: var(--oxblood, #5d2024) !important;
    font-weight: 500;
  }

  .site-header .site-nav:not(.aj-pill-nav) > a.active:not(.nav-appointment)::after,
  .site-header .site-nav:not(.aj-pill-nav) > .nav-dropdown > .nav-trigger.active::after {
    content: "";
    z-index: -1;
    display: block !important;
    position: absolute;
    top: 50%;
    bottom: auto;
    left: -12px;
    right: -12px;
    height: 38px;
    border: 1px solid rgba(215, 183, 133, .56);
    border-radius: 999px;
    background: var(--ivory, #f6f1e8) !important;
    box-shadow: 0 5px 16px rgba(31, 23, 19, .1);
    transform: translateY(-50%);
  }

  .site-header .site-nav:not(.aj-pill-nav) > .nav-dropdown > .nav-trigger.active > span {
    color: var(--oxblood, #5d2024) !important;
  }

  .site-header .site-nav:not(.aj-pill-nav) > .nav-dropdown.aj-nav-active > .aj-collections-link {
    color: var(--oxblood, #5d2024) !important;
    font-weight: 500;
  }

  .site-header .site-nav .aj-nav-pill {
    z-index: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 38px;
    border: 1px solid rgba(215, 183, 133, .56);
    border-radius: 999px;
    background: var(--ivory, #f6f1e8);
    box-shadow: 0 5px 16px rgba(31, 23, 19, .1);
    opacity: 0;
    transform: translateY(-50%);
    transition:
      left 380ms cubic-bezier(.34, 1.4, .4, 1),
      width 380ms cubic-bezier(.34, 1.4, .4, 1),
      opacity 120ms ease;
  }

  .site-header .site-nav.aj-pill-nav .aj-nav-pill {
    opacity: 1;
  }

  .site-header .site-nav .aj-nav-pill.aj-nav-pill-initializing {
    transition: none !important;
  }

  .site-header .site-nav.aj-pill-nav > a.active:not(.nav-appointment),
  .site-header .site-nav.aj-pill-nav > .nav-dropdown > .nav-trigger.active {
    background: transparent;
    box-shadow: none;
    color: var(--ivory, #f6f1e8) !important;
  }

  .site-header .site-nav.aj-pill-nav > a.active:not(.nav-appointment)::after,
  .site-header .site-nav.aj-pill-nav > .nav-dropdown > .nav-trigger.active::after {
    display: none !important;
  }

  .site-header .site-nav.aj-pill-nav > a.aj-pill-current:not(.nav-appointment),
  .site-header .site-nav.aj-pill-nav > .nav-dropdown.aj-pill-current > .aj-collections-link,
  .site-header .site-nav.aj-pill-nav > .nav-dropdown.aj-pill-current > .nav-trigger,
  .site-header .site-nav.aj-pill-nav > .nav-dropdown.aj-pill-current > .nav-trigger > span {
    color: var(--oxblood, #5d2024) !important;
  }

  .site-header .site-nav.aj-pill-nav > a.active:not(.nav-appointment),
  .site-header .site-nav.aj-pill-nav > .nav-dropdown > .nav-trigger.active {
    font-weight: 500;
  }
}

/* The compact menu keeps its existing stacked layout and gains the same
 * cream selected state without the moving desktop indicator. */
@media (width <= 760px) {
  .site-header .site-nav > a:not(.nav-appointment),
  .site-header .site-nav > .nav-dropdown > .nav-trigger {
    color: var(--oxblood, #5d2024) !important;
  }

  .site-header .site-nav > a.active:not(.nav-appointment),
  .site-header .site-nav > .nav-dropdown > .nav-trigger.active {
    border-radius: 10px;
    background: var(--ivory, #f6f1e8);
    padding-inline: 14px;
    color: var(--oxblood, #5d2024) !important;
    font-weight: 500;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: center;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .aj-collections-link {
    min-height: 52px;
    border-bottom: 1px solid var(--line, #d8cfc1);
    display: flex;
    align-items: center;
    color: var(--oxblood, #5d2024) !important;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .nav-trigger,
  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .nav-trigger.active {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"].aj-nav-active > .aj-collections-link {
    font-weight: 500;
  }

  .site-header .site-nav > .nav-dropdown[data-aj-collections-split="r1"] > .collections-menu {
    grid-column: 1 / -1;
  }

  .site-header .site-nav .aj-nav-pill {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav .aj-nav-pill,
  .site-header .site-nav > a:not(.nav-appointment),
  .site-header .site-nav > .nav-dropdown > .nav-trigger,
  .site-header .site-nav > .nav-dropdown > .aj-collections-link {
    transition: none !important;
  }
}

/*
 * The four network links are intentionally icon-only. Their existing
 * aria-labels preserve the full platform names for assistive technology.
 * WhatsApp remains the full-width contact action above them.
 */
.aj-site-owner-r21 .site-footer .footer-social-links {
  width: auto !important;
  grid-template-columns: none !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px !important;
}

.aj-site-owner-r21 .site-footer .footer-social-links .footer-social-button {
  flex: 0 0 46px;
  width: 46px !important;
  min-width: 46px;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 8px;
}

.aj-site-owner-r21 .site-footer .footer-social-links .footer-brand-icon {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
}

.aj-site-owner-r21 .site-footer .footer-social-links .footer-brand-label {
  display: none !important;
}

/* Reduce the desktop product-type directory's vertical footprint by ~35%. */
@media (width > 760px) {
  .site-shell main > .category-section {
    padding-block: 30px !important;
  }

  .site-shell main > .category-section .section-heading {
    align-items: end;
    margin-bottom: 16px !important;
  }

  .site-shell main > .category-section .section-kicker {
    margin-bottom: 8px !important;
  }

  .site-shell main > .category-section .section-heading h2 {
    font-size: clamp(34px, 3.2vw, 42px) !important;
    line-height: 1 !important;
  }

  .site-shell main > .category-section .category-list a {
    grid-template-columns: 44px minmax(210px, .72fr) minmax(0, 1.28fr) 24px !important;
    gap: 14px !important;
    min-height: 50px !important;
  }

  .site-shell main > .category-section .category-list h3 {
    font-size: 22px !important;
    line-height: 1.05;
  }

  .site-shell main > .category-section .category-list p {
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /*
   * Compact the two homepage blocks marked in the owner review. These values
   * reduce their measured desktop heights by approximately 30% while keeping
   * every word, action and decorative element present.
   */
  .site-shell main > .philosophy {
    padding-block: 26px !important;
  }

  .site-shell main > .philosophy .section-kicker {
    margin-bottom: 12px !important;
  }

  .site-shell main > .philosophy h2 {
    font-size: 42px !important;
    line-height: 1 !important;
  }

  .site-shell main > .enquiry-band {
    padding-block: 24px !important;
  }

  .site-shell main > .enquiry-band .section-kicker {
    margin-bottom: 12px !important;
  }

  .site-shell main > .enquiry-band h2 {
    font-size: 42px !important;
    line-height: 1.02 !important;
  }

  .site-shell main > .enquiry-band > p:not(.section-kicker) {
    margin-block: 14px 18px !important;
  }

  .site-shell main > .enquiry-band > div {
    gap: 16px 26px !important;
  }

  /*
   * Reduce the complete About-page content footprint by roughly 35% without
   * omitting, clipping or collapsing any editorial content.
   */
  .about-hero {
    min-height: 0 !important;
  }

  .about-hero-copy {
    padding-block: 35px !important;
  }

  .about-hero-visual {
    height: 489px !important;
    min-height: 0 !important;
  }

  .about-hero h1 {
    font-size: 53px !important;
    line-height: .94 !important;
  }

  .about-hero-intro {
    margin-top: 20px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .about-hero-actions {
    margin-top: 18px !important;
  }

  .about-global,
  .about-reach,
  .about-foundation,
  .about-tradition {
    padding-block: 40px !important;
  }

  .about-pioneer {
    padding-block: 49px !important;
  }

  .about-method {
    padding-block: 40px !important;
  }

  .about-cta {
    padding-block: 32px !important;
  }

  .about-heading-block h2,
  .about-reach-heading h2,
  .about-global-heading h2,
  .about-method-intro h2,
  .about-tradition h2,
  .about-cta h2 {
    font-size: 42px !important;
    line-height: 1.02 !important;
  }

  .about-pioneer h2 {
    font-size: 46px !important;
    line-height: 1 !important;
  }

  .about-editorial,
  .about-pioneer,
  .about-tradition,
  .about-cta {
    gap: 71px !important;
  }

  .about-global-heading,
  .about-reach-heading {
    gap: 53px !important;
  }

  .about-global-body {
    gap: 71px !important;
    margin-top: 26px !important;
    padding-top: 20px !important;
  }

  .about-region-list li {
    min-height: 34px !important;
    padding-block: 6px !important;
    font-size: 14px !important;
  }

  .about-list-intro {
    margin-block: 24px 10px !important;
  }

  .about-temple-grid article {
    min-height: 104px !important;
    padding: 14px !important;
  }

  .about-temple-grid h3 {
    margin-top: 18px !important;
    font-size: 22px !important;
  }

  .about-reach-notes {
    gap: 27px !important;
    margin-top: 20px !important;
  }

  .about-prose > p,
  .about-pioneer-copy p {
    margin-bottom: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .about-prose > p:first-child,
  .about-pioneer-copy p:first-child {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  .about-signature-line {
    margin-top: 16px !important;
    padding-top: 12px !important;
    font-size: 16px !important;
  }

  .about-pioneer-statement > span {
    width: 62px !important;
    height: 62px !important;
    margin-block: 4px 18px !important;
    font-size: 22px !important;
  }

  .about-pioneer-copy {
    padding-top: 17px !important;
  }

  .about-reach-notes p {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  .about-reach-notes p:first-child {
    font-size: 15px !important;
  }

  .about-method-intro {
    gap: 62px !important;
    padding-bottom: 25px !important;
  }

  .about-principle {
    gap: 62px !important;
    padding-block: 20px !important;
  }

  .about-principle h3 {
    margin-top: 12px !important;
    font-size: 31px !important;
    line-height: 1.05 !important;
  }

  .about-collection-links,
  .about-consultation-list {
    margin-block: 5px 16px !important;
  }

  .about-collection-links li,
  .about-consultation-list li {
    min-height: 32px !important;
    padding-block: 6px !important;
  }

  .about-tradition blockquote {
    margin-top: 18px !important;
    padding-top: 17px !important;
    font-size: 23px !important;
    line-height: 1.3 !important;
  }

  .about-cta p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .about-cta li {
    padding-block: 10px !important;
    font-size: 14px !important;
  }

  .about-cta-actions {
    margin-top: 18px !important;
  }
}

@media (width <= 760px) {
  .site-nav .nav-appointment {
    margin-top: 12px;
  }

  /* Keep the same compact direction on mobile without sacrificing reading size. */
  .about-hero-copy {
    padding-block: 30px !important;
  }

  .about-hero-visual {
    min-height: 44svh !important;
  }

  .about-pioneer,
  .about-method,
  .about-cta {
    padding-block: 31px !important;
  }

  .about-editorial,
  .about-global,
  .about-reach,
  .about-tradition {
    padding-block: 40px !important;
  }

  .about-editorial,
  .about-pioneer,
  .about-reach-heading,
  .about-global-heading,
  .about-global-body,
  .about-method-intro,
  .about-principle,
  .about-tradition,
  .about-cta {
    gap: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .nav-appointment {
    transition: none;
  }
}

/*
 * Abha Jindal heritage header lockup.
 *
 * Crop the official SVG to its AJ crest, then pair that approved geometry
 * with the existing live brand name and devotional line. This keeps the
 * identity crisp and readable without increasing the header height.
 */
.site-header .brand-link {
  position: relative !important;
  display: grid !important;
  flex: 0 0 auto !important;
  grid-template-columns: 56px 1px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 13px;
  row-gap: 0;
  align-items: center;
  width: clamp(310px, 25.5vw, 350px) !important;
  height: 54px !important;
  min-width: 0 !important;
  overflow: visible;
}

.site-header .brand-link::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  width: 56px;
  height: 54px;
  background: -5.2px -6px / 176px 66px no-repeat url("https://abhajindal.com/wp-content/uploads/abha-jindal/site/option-two/assets/ABHA_JINDAL_Horizontal_Brown_v1.0.svg");
  filter: brightness(0) invert(86%) sepia(20%) saturate(616%) hue-rotate(356deg) brightness(106%) contrast(93%);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .site-header .brand-link::before {
    background: #f0d9aa;
    filter: none;
    -webkit-mask: -5.2px -6px / 176px 66px no-repeat url("https://abhajindal.com/wp-content/uploads/abha-jindal/site/option-two/assets/ABHA_JINDAL_Horizontal_Brown_v1.0.svg");
    mask: -5.2px -6px / 176px 66px no-repeat url("https://abhajindal.com/wp-content/uploads/abha-jindal/site/option-two/assets/ABHA_JINDAL_Horizontal_Brown_v1.0.svg");
  }
}

.site-header .brand-link::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  width: 1px;
  height: 34px;
  background: rgba(215, 183, 133, .7);
}

.site-header .brand-link .brand-mark {
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  color: var(--ivory, #f6f1e8) !important;
  font-family: var(--sans, "Helvetica Neue", Arial, sans-serif) !important;
  font-size: clamp(16.5px, 1.45vw, 19px) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  white-space: nowrap !important;
}

.site-header .brand-link .brand-mark > span {
  display: inline !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

.site-header .brand-link .brand-header-tagline {
  position: static !important;
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  color: rgba(246, 241, 232, .84) !important;
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: clamp(9.5px, .82vw, 11px) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

.site-header .brand-link .brand-header-tagline::before {
  display: none !important;
}

@media (width > 900px) and (width <= 1100px) {
  .site-header .brand-link {
    grid-template-columns: 44px 1px minmax(0, 1fr);
    column-gap: 11px;
    width: 250px !important;
  }

  .site-header .brand-link::before {
    width: 44px;
    height: 48px;
    background-position: -4px -3px;
    background-size: 135px 50.625px;
    -webkit-mask-position: -4px -3px;
    mask-position: -4px -3px;
    -webkit-mask-size: 135px 50.625px;
    mask-size: 135px 50.625px;
  }

  .site-header .brand-link .brand-mark {
    font-size: 14.5px !important;
    letter-spacing: .1em !important;
  }

  .site-header .brand-link .brand-header-tagline {
    font-size: 8.8px !important;
  }
}

@media (width > 760px) and (width <= 900px) {
  .site-header .brand-link {
    grid-template-columns: 38px 1px minmax(0, 1fr);
    column-gap: 8px;
    width: 190px !important;
    height: 50px !important;
  }

  .site-header .brand-link::before {
    width: 38px;
    height: 44px;
    background-position: -3.6px -3px;
    background-size: 122px 45.75px;
    -webkit-mask-position: -3.6px -3px;
    mask-position: -3.6px -3px;
    -webkit-mask-size: 122px 45.75px;
    mask-size: 122px 45.75px;
  }

  .site-header .brand-link .brand-mark {
    font-size: 13px !important;
    letter-spacing: .1em !important;
  }

  .site-header .brand-link .brand-mark > span {
    display: none !important;
  }

  .site-header .brand-link .brand-header-tagline {
    font-size: 8px !important;
  }
}

@media (width <= 760px) {
  .site-header .brand-link {
    grid-template-columns: 44px 1px minmax(0, 1fr);
    column-gap: 10px;
    width: 220px !important;
    height: 50px !important;
  }

  .site-header .brand-link::before {
    width: 44px;
    height: 46px;
    background-position: -4.2px -4px;
    background-size: 144px 54px;
    -webkit-mask-position: -4.2px -4px;
    mask-position: -4.2px -4px;
    -webkit-mask-size: 144px 54px;
    mask-size: 144px 54px;
  }

  .site-header .brand-link::after {
    height: 30px;
  }

  .site-header .brand-link .brand-mark {
    font-size: 14.5px !important;
    letter-spacing: .12em !important;
  }

  .site-header .brand-link .brand-mark > span {
    display: none !important;
  }

  .site-header .brand-link .brand-header-tagline {
    font-size: 8.5px !important;
  }
}

@media (width <= 390px) {
  .site-header .brand-link {
    grid-template-columns: 36px 1px minmax(0, 1fr);
    grid-template-rows: 1fr;
    column-gap: 9px;
    width: 176px !important;
    height: 46px !important;
  }

  .site-header .brand-link::before {
    width: 36px;
    height: 42px;
    background-position: -3.5px -2px;
    background-size: 116px 43.5px;
    -webkit-mask-position: -3.5px -2px;
    mask-position: -3.5px -2px;
    -webkit-mask-size: 116px 43.5px;
    mask-size: 116px 43.5px;
  }

  .site-header .brand-link::after {
    height: 28px;
  }

  .site-header .brand-link .brand-mark {
    grid-row: 1;
    align-self: center;
    margin: 0 !important;
    font-size: 13.5px !important;
    letter-spacing: .1em !important;
  }

  .site-header .brand-link .brand-header-tagline {
    display: none !important;
  }
}