:root {
  /* muted palette: washed charcoal, bone/stone, dusty sage, washed burgundy, olive, slate */
  --charcoal: #1f1f1d;
  --black: #161615;
  --black-2: #252523;
  --bone: #d9d3c6;
  --bone-2: #aea89b;
  --stone: #c6bfb0;
  --sage: #8b9584;
  --sage-d: #5d6658;
  --burgundy: #6a4043;
  --burgundy-d: #45292b;
  --olive: #6a6a4f;
  --olive-d: #45452f;
  --slate: #5d666e;
  --slate-d: #3a4046;
  /* DISPLAY FONT: change these two lines to switch the wordmark + headings font.
     Also swap the matching family in the Google Fonts <link> in index.html.
     Current: Michroma (option 1, chrome wordmark). Previous: Grenze Gotisch, weight 700. Options (see screenshots/font-options.png):
       1 Michroma (Y2K chrome)        --font-display: 'Michroma', sans-serif;               weight 400  link: family=Michroma
          (optional: add class "wordmark--chrome" to the <h1> for the muted chrome gradient)
       2 Pirata One (tattoo gothic)   --font-display: 'Pirata One', serif;                  weight 400  link: family=Pirata+One
       3 Rubik Distressed (grunge)    --font-display: 'Rubik Distressed', sans-serif;       weight 400  link: family=Rubik+Distressed
       4 Big Shoulders Display        --font-display: 'Big Shoulders Display', sans-serif;  weight 900  link: family=Big+Shoulders+Display:wght@800;900
          (looks best with --font-display-case: uppercase) */
  --font-display: 'Michroma', 'Eurostile', sans-serif;
  --font-display-weight: 400;
  --font-display-case: none;
  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.dot { color: var(--sage); }
.c { font-family: var(--sans); font-weight: 400; font-size: .32em; vertical-align: super; line-height: 0; margin-left: .06em; color: var(--bone-2); position: relative; top: -.15em; }

/* film grain overlay */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--pad);
  background: rgba(22, 22, 21, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(217, 211, 198, .1);
}
.nav__logo { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: 1.05rem; letter-spacing: -.03em; line-height: 1; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.nav__links a { text-decoration: none; opacity: .85; }
.nav__links a:hover { opacity: 1; }
.nav__links li:not(:last-child) { display: none; }
.nav__cta { border: 1px solid var(--bone); padding: .5rem .9rem; border-radius: 999px; opacity: 1 !important; }
.nav__cta:hover { background: var(--bone); color: var(--charcoal); }
@media (min-width: 640px) { .nav__links li:not(:last-child) { display: block; } }

/* HERO */
.hero {
  position: relative;
  min-height: calc(100svh - 60px);
  display: grid; place-items: center;
  padding: 3.5rem var(--pad) 5rem;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(106, 64, 67, .28), transparent 70%),
    radial-gradient(ellipse 90% 60% at 20% 100%, rgba(139, 149, 132, .10), transparent 70%),
    linear-gradient(180deg, var(--black) 0%, var(--charcoal) 50%, var(--charcoal) 100%);
}
.hero { --frame: clamp(.75rem, 3vw, 2rem); }
.hero::before {
  /* faint gothic frame */
  content: ""; position: absolute; inset: var(--frame);
  border: 1px solid rgba(217, 211, 198, .16);
  outline: 1px solid rgba(217, 211, 198, .07); outline-offset: 6px;
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 44rem; width: 100%; }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1rem; opacity: .75; }
.wordmark {
  font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case);
  font-size: clamp(3.2rem, 17vw, 8.5rem); letter-spacing: -.045em;
  line-height: .9; margin: 0;
  color: var(--bone);
  text-shadow: 0 0 30px rgba(217, 211, 198, .08), 0 10px 36px rgba(0, 0, 0, .5);
}
.hero__drop {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem;
  margin: 1.5rem 0 1rem; display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.pill { background: var(--sage); color: var(--black); padding: .3rem .7rem; border-radius: 2px; font-weight: 700; }
.hero__lede { max-width: 32rem; margin: 0 auto 2rem; color: var(--bone-2); font-size: 1.05rem; }

.signup { max-width: 30rem; margin: 0 auto; }
.signup__fields { display: flex; flex-direction: column; gap: .6rem; }
.signup input {
  width: 100%; font: inherit; font-size: 1rem; /* 16px avoids iOS zoom */
  padding: .95rem 1.1rem; border-radius: 4px;
  border: 1px solid rgba(217, 211, 198, .35);
  background: rgba(22, 22, 21, .55); color: var(--bone);
}
.signup input::placeholder { color: rgba(217, 211, 198, .5); }
.signup input:focus { outline: 2px solid var(--bone); outline-offset: 2px; }
.signup input[aria-invalid="true"] { border-color: #c9918c; }
.signup button, .btn {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem;
  padding: 1rem 1.4rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--stone); color: var(--black); text-decoration: none; display: inline-block;
  transition: transform .15s ease, background .15s ease;
}
.signup button:hover, .btn:hover { background: var(--bone); transform: translateY(-1px); }
.signup__note { font-size: .78rem; opacity: .6; margin: .8rem 0 0; }
.signup__error { color: #d4a19c; font-size: .85rem; margin: .5rem 0 0; }
.signup__thanks {
  max-width: 30rem; margin: 0 auto; padding: 1.5rem; border-radius: 6px;
  border: 1px solid rgba(217, 211, 198, .3); background: rgba(22, 22, 21, .5);
}
.signup__thanks-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 1.25rem; margin: 0 0 .6rem; line-height: 1.2; }
.signup__thanks p:last-child { margin: 0; color: var(--bone-2); }
@media (min-width: 520px) {
  .signup__fields { flex-direction: row; }
  .signup button { white-space: nowrap; }
}
.hero__scroll {
  /* centred inside the frame, in the strip between content and the frame's bottom edge */
  position: absolute; left: 0; right: 0; bottom: calc(var(--frame) + 1rem);
  width: max-content; margin-inline: auto;
  display: flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--mono); font-weight: 700; font-size: .8rem; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
  text-decoration: none; opacity: .9; white-space: nowrap;
  transition: opacity .2s;
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll-text { margin-right: -.2em; } /* cancel trailing letter-spacing so the label is optically centred */
.hero__scroll-arrow { font-family: var(--sans); font-weight: 400; letter-spacing: 0; font-size: 1.05em; }

/* MARQUEE */
.marquee { background: var(--black-2); color: var(--bone); overflow: hidden; border-block: 1px solid rgba(217, 211, 198, .14); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: scroll 112s linear infinite; }
/* both groups are identical: same items, same gap, same trailing padding, so -50% lands seamlessly */
.marquee__group {
  --gap: 1.4em;
  display: flex; align-items: center; gap: var(--gap); padding: 1rem var(--gap) 1rem 0;
  font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: .9rem; line-height: 1;
  white-space: nowrap;
}
.marquee__group b { font-weight: 700; letter-spacing: .18em; margin-right: -.18em; display: block; } /* cancel trailing tracking */
.marquee__group .sep { font-style: normal; font-family: var(--sans); font-size: .85em; line-height: 1; color: var(--sage); display: block; transform: translateY(-.04em); }
@media (max-width: 600px) { .marquee__group { font-size: .82rem; --gap: 1.1em; padding-block: .85rem; } }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 180s; } html { scroll-behavior: auto; } }

/* SECTIONS */
section { scroll-margin-top: 70px; }
.section-head { max-width: var(--max); margin: 0 auto 2rem; }
.section-title { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: clamp(1.6rem, 6.4vw, 2.8rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .8rem; }
.section-sub { margin: 0; max-width: 34rem; color: var(--bone-2); opacity: .85; }

/* DROP GRID */
.drop { padding: 4rem var(--pad); background: var(--black); }
.grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { background: #222220; border: 1px solid rgba(217, 211, 198, .08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.card--feature { grid-column: 1 / -1; }
.tile {
  position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center;
  border-bottom: 1px solid rgba(217, 211, 198, .08);
}
.card--feature .tile { aspect-ratio: 16 / 10; }
.tile::after {
  /* subtle stitched frame */
  content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(217, 211, 198, .22); border-radius: 3px;
}
.tile--burgundy { background: radial-gradient(circle at 30% 25%, var(--burgundy), var(--burgundy-d) 75%); }
.tile--charcoal { background: radial-gradient(circle at 30% 25%, #3b3b38, var(--black) 75%); }
.tile--acid {
  /* acid-wash charcoal placeholder: lighter mottled grey so it stands out on the charcoal page */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .79 0 0 0 0 .77 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 30% 25%, #6e6f6c, #4a4b48 75%);
  background-size: cover, 160px 160px, auto;
  box-shadow: inset 0 0 0 1px rgba(217, 211, 198, .22);
}
.tile--acid .tile__label { background: rgba(22, 22, 21, .6); }
.tile--sage { background: radial-gradient(circle at 30% 25%, var(--sage), var(--sage-d) 75%); }
.tile--slate { background: radial-gradient(circle at 30% 25%, var(--slate), var(--slate-d) 75%); }
.tile--olive { background: radial-gradient(circle at 30% 25%, var(--olive), var(--olive-d) 75%); }
.tile__label {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .6rem; border: 1px solid rgba(217, 211, 198, .45); border-radius: 2px; color: var(--bone);
  background: rgba(22, 22, 21, .3); text-align: center; position: relative; z-index: 1; max-width: calc(100% - 36px);
}
@media (max-width: 759px) { .tile__label { font-size: .56rem; letter-spacing: .1em; padding: .35rem .45rem; } }
.tile__no { position: absolute; top: 18px; left: 20px; font-family: var(--font-display); font-size: .85rem; opacity: .6; }
.card__body { padding: .9rem 1rem 1.1rem; }
.card h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.card__colour { margin: .15rem 0 .6rem; font-size: .82rem; opacity: .65; }
.card__price { margin: 0; font-family: var(--mono); font-weight: 700; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tag {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
  border: 1px solid rgba(217, 211, 198, .35); border-radius: 2px; padding: .15rem .4rem; opacity: .8;
}
.drop__cta { text-align: center; margin: 2.5rem 0 0; }

@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
  .card { grid-column: span 2; }
  .card--feature { grid-column: span 2; }
  .card--feature .tile { aspect-ratio: 4 / 5; }
  .card--teaser { grid-column: 1 / -1; }
}

/* ABOUT */
.about { padding: 5rem var(--pad); background:
  radial-gradient(ellipse 60% 70% at 85% 20%, rgba(106, 64, 67, .22), transparent 70%), var(--charcoal); }
.about__inner { max-width: 46rem; margin: 0 auto; }
.about p { font-size: 1.1rem; color: var(--bone-2); margin: 0 0 1rem; }
.values { margin-top: 2.5rem; display: grid; gap: 1rem; }
.values li { border-top: 1px solid rgba(217, 211, 198, .25); padding-top: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.values strong { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.values span { opacity: .75; font-size: .95rem; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* SOCIALS */
.socials { padding: 4rem var(--pad); background: var(--stone); color: var(--charcoal); text-align: center; }
.socials .section-title { color: var(--charcoal); }
.socials__row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; max-width: 52rem; margin: 1.5rem auto 0; padding: 0; list-style: none; }
.socials__row li { width: 100%; max-width: 20rem; display: flex; }
.socials__row .social { width: 100%; }
.social {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; text-align: left;
  padding: 1rem 1.2rem; border: 1px solid rgba(31, 31, 29, .55); border-radius: 6px; transition: background .15s, color .15s;
}
.social:hover { background: var(--charcoal); color: var(--bone); border-color: var(--charcoal); }
.social svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
.social span { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--mono); font-size: .85rem; }
.social b { font-family: var(--sans); font-size: 1rem; }
.socials__note { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 1.2rem 0 0; }
@media (min-width: 640px) { .socials__row { flex-direction: row; align-items: stretch; } .socials__row li { flex: 1 1 0; max-width: 16rem; } }

/* FOOTER */
.footer { background: var(--black); padding: 3rem var(--pad) 2.5rem; text-align: center; }
.footer__mark { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: 1.8rem; letter-spacing: -.04em; margin: 0 0 1.2rem; line-height: 1; }
.footer__links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem; }
.footer__links a { text-decoration: none; opacity: .75; }
.footer__links a:hover { opacity: 1; }
.footer__small { font-size: .75rem; opacity: .5; margin: 0; }

/* distressed print texture on the wordmark */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .wordmark {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.55 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.55 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
  }
}
.nav__logo .c, .footer__mark .c { font-size: .45em; top: -.05em; }
.wordmark .c { margin-left: 0; }

/* optional muted chrome treatment for option 1 (add class to the hero <h1>) */
.wordmark--chrome {
  background: linear-gradient(180deg, #f0ece4 0%, #bdb8ae 42%, #6f6c66 50%, #cfcac0 62%, #8f8b84 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6));
}
.wordmark--chrome .c { -webkit-text-fill-color: var(--bone-2); }

/* FEATURED: THE SAGE SET */
.feature { padding: 4rem var(--pad); background:
  radial-gradient(ellipse 70% 60% at 20% 30%, rgba(139, 149, 132, .14), transparent 70%), var(--charcoal);
  border-bottom: 1px solid rgba(217, 211, 198, .08); }
.feature__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
.tile--hero { aspect-ratio: 5 / 4; border-radius: 6px; border: 1px solid rgba(217, 211, 198, .12); }
.tile--hero .tile__label { font-size: .7rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--bone-2); }
.swatches li { display: flex; align-items: center; gap: .45rem; }
.sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(217, 211, 198, .35); flex: none; }
.sw--acid { background: radial-gradient(circle at 35% 35%, #8a8b87, #4a4b48 80%); }
.sw--chrome { background: linear-gradient(180deg, #f0ece4, #8f8b84 50%, #cfcac0); }
.sw--stone { background: var(--stone); }
.sw--gem { background: radial-gradient(circle at 35% 30%, #fff 0 15%, #cfd3d6 35%, #8d9399 80%); }
.eyebrow--left { text-align: left; margin-bottom: .9rem; }
.feature__desc { color: var(--bone-2); font-size: 1.05rem; margin: 0 0 1.5rem; max-width: 30rem; }
.prices { border-top: 1px solid rgba(217, 211, 198, .15); margin-bottom: 1rem; max-width: 30rem; }
.prices li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(217, 211, 198, .15); font-size: .95rem; color: var(--bone-2); }
.prices b { font-family: var(--mono); color: var(--bone); }
.prices__main span { color: var(--bone); font-weight: 500; }
.prices__main b { font-size: 1.15rem; }
.feature__note { font-size: .8rem; color: var(--bone-2); margin: 0 0 1.5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.feature__cta { width: 100%; text-align: center; }
@media (min-width: 520px) { .feature__cta { width: auto; } }
@media (min-width: 860px) {
  .feature { padding: 6rem var(--pad); }
  .feature__inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
  .tile--hero { aspect-ratio: 1 / 1; }
}

/* DROP 02 TEASER */
.card--teaser { grid-column: 1 / -1; background: transparent; border: 1px dashed rgba(217, 211, 198, .25); }
.teaser { display: grid; gap: .35rem; padding: 1.6rem 1.4rem; text-decoration: none; text-align: center; transition: background .15s; }
.teaser:hover { background: rgba(139, 149, 132, .08); }
.teaser__eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.teaser__title { font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.6rem); letter-spacing: -.02em; }
.teaser__text { color: var(--bone-2); font-size: .92rem; }
.teaser__link { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .4rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(217, 211, 198, .4); }

/* ===== FINAL LOGO (chrome image) =====
   Assets in /assets, regenerated by assets/make_assets.py. Text wordmark styles above are kept for the footer
   and as a fallback; the previous text-only hero lives in /workspace/strxzz-site-v2-textmark/. */
.hero__logo { margin: 0 auto; line-height: 0; width: min(88vw, 44rem); }
.hero__logo img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
}
.nav__logo--img { display: inline-flex; align-items: center; line-height: 0; }
.nav__logo--img img { display: block; height: 40px; width: auto; margin: -5px 0; }
@media (min-width: 760px) { .nav__logo--img img { height: 46px; margin: -7px 0; } }