/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
}

.container {
  width: 100%;
  max-width: var(--size-container);
  margin-inline: auto;
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}

/* ------------------------- Tokens ------------------------- */

:root {
  --color-cream: #fff0cd;
  --color-cream-hover: #f3dfae;
  --color-dark: #050001;
  --color-dark-hover: #2a2016;
  --color-ink: #0d0d0d;
  --color-gold: #b4a27a;
  --color-gold-muted: #8a7a52;
  --color-line: #d8cba5;
  --color-rule: #c3b58d;
  --color-leaf: #f4e6c2;
  --color-hover: #6b5a33;

  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Satoshi", system-ui, sans-serif;
  --ease-osmo: cubic-bezier(0.625, 0.05, 0, 1);

  --gutter: 0.75em;
  --grid-gap: 0.5em;
  --card-height: 29.9375em;
  --card-head-height: 5.9375em;
  --card-side-width: 6.875em;
  --banner-height: 49em;
}

/* ------------------------- Base ------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-weight: 500;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-dark);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-hover);
}

h1, h2, h3, p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
}

.u-cream {
  color: var(--color-cream);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------- Buttons ------------------------- */

.btn-cream {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75em;
  min-width: 18.5833em;
  padding: 0 1.3333em;
  background: var(--color-cream);
  color: var(--color-dark);
  font-size: 0.75em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.btn-cream:hover {
  background: var(--color-cream-hover);
  color: var(--color-dark);
}

.btn-cream.is--hero {
  width: 100%;
  min-width: 0;
  min-height: 3.1429em;
  font-size: 0.875em;
}

.btn-dark {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 2.5385em;
  min-width: 9.1538em;
  padding: 0 0.9231em;
  background: var(--color-dark);
  color: var(--color-cream);
  border: 1px solid transparent; /* background shows through, so the border always matches */
  font-size: 0.8125em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.btn-dark:hover {
  background: var(--color-dark-hover);
  color: var(--color-cream);
}

.btn-dark.is--learn {
  align-self: flex-start;
  min-width: 10.5em;
  font-size: 0.75em;
  min-height: 2.5833em;
}

.text-btn {
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

/* ------------------------- Header ------------------------- */

.header {
  will-change: transform;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2em;
  padding: 0 var(--gutter) 0 1em;
  background: var(--color-cream);
}

.header__nav {
  display: flex;
  gap: 1.6667em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.header__nav a {
  text-decoration: none;
}

.header__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  color: var(--color-dark);
  line-height: 0;
  text-decoration: none;
}

.header__brand:hover {
  color: var(--color-hover);
}

.header__logo {
  display: block;
  width: 11.8125em;
  height: auto;
}


.header__toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

/* ------------------------- Full-bleed media ------------------------- */

.bleed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bleed__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bleed__media img,
.bleed__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 35mm film grain over the hero video: a real grain plate (fine grain + silver clumps),
   jumped to a new random position every frame at 24fps, plus a faint exposure flicker */
.bleed__media.is--grain::after {
  content: "";
  position: absolute;
  inset: -100%;
  pointer-events: none;
  background: url("../images/grain.webp") 0 0 / 20em 20em repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  animation: grain-35mm 0.4166s steps(1, end) infinite;
}

.bleed__media.is--grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #050001;
  opacity: 0;
  animation: film-flicker 0.5s steps(1, end) infinite;
}

/* 10 frames @ 24fps — irregular jumps so the plate never visibly slides */
@keyframes grain-35mm {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-13%, 7%); }
  20%  { transform: translate(9%, -16%); }
  30%  { transform: translate(-21%, -3%); }
  40%  { transform: translate(17%, 11%); }
  50%  { transform: translate(-6%, 19%); }
  60%  { transform: translate(23%, -9%); }
  70%  { transform: translate(-18%, -14%); }
  80%  { transform: translate(4%, 22%); }
  90%  { transform: translate(12%, -21%); }
  100% { transform: translate(0, 0); }
}

@keyframes film-flicker {
  0%   { opacity: 0.02; }
  17%  { opacity: 0; }
  33%  { opacity: 0.035; }
  50%  { opacity: 0.01; }
  67%  { opacity: 0.025; }
  83%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bleed__media.is--grain::after,
  .bleed__media.is--grain::before {
    animation: none;
  }
}

/* ------------------------- Hero ------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.hero__content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5em;
  margin-top: auto;
  padding: 0 var(--gutter) 2.5em 0.9375em;
}

.hero__title {
  max-width: 9.2857em;
  font-size: 4.375em;
  margin-bottom: -0.0857em;
  line-height: 0.8571;
  text-transform: uppercase;
  color: var(--color-cream);
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 0.8125em;
  width: 14.875em;
}

.hero__text {
  font-size: 1.125em;
  line-height: 1.0556;
  font-weight: 500;
}

.body-bold {
  font-size: 0.875em;
  line-height: 1.1429;
  font-weight: 500;
}

/* Home hero: title + lead stacked on the left, CTA alone on the right */
.hero__content.is--home {
  padding-bottom: 1.5em;
}

.hero__heading.is--home {
  gap: 1.375em;
  max-width: 40.625em;
}

.hero__heading.is--home .hero__title {
  margin-bottom: 0;
}

.hero__lead {
  max-width: 33.3333em;
}

.hero__cta {
  width: 14.875em;
}

/* ------------------------- Intro ------------------------- */

.intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5em;
  padding: 7.5em var(--gutter) 16.25em;
}

.intro__text {
  flex: 1 1 11.2em;
  max-width: 16.26em;
  margin-top: 1.94em;
  padding-left: 0.16em;
  font-size: 3.125em;
  line-height: 0.96;
}

.intro__image {
  flex: 0 1 37.5em;
  width: 37.5em;
  min-width: 0;
  height: auto;
}

/* ------------------------- Portfolio ------------------------- */

.portfolio {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  padding: 0 var(--gutter);
}

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

.grid-2 {
  align-content: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--banner-height);
  padding: 1.4375em 0.8125em 1.25em;
}

.feature.is--first {
  padding-top: 1.875em;
}

.feature.is--alt {
  padding: 1.4375em 0.75em 1.5em;
}

.feature__title {
  max-width: 6.72em;
  font-size: 3.125em;
  line-height: 0.8;
  color: var(--color-cream);
}

.feature__title.is--narrow {
  max-width: 5.6em;
}

.feature__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.375em;
  max-width: 14.3125em;
}

/* ------------------------- Cards ------------------------- */

.card__title {
  margin-bottom: 0.3667em;
  font-size: 1.875em;
  line-height: 0.9333;
}

.card__title.is--tight {
  margin-bottom: 0.3em;
}

.card__box {
  display: flex;
  flex-direction: column;
  height: var(--card-height);
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.card__box.is--product {
  align-items: center;
  justify-content: center;
}

.card__head {
  display: flex;
  height: var(--card-head-height);
  border-bottom: 1px solid var(--color-line);
  overflow: hidden;
}

/* Band ring: the flat label is cut into strips that wrap around a cigar on hover (built by JS) */
.band {
  position: absolute;
  pointer-events: none;
  perspective: 40em;
  visibility: hidden;
}

.band__group {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.band__strip {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  will-change: transform, filter;
}

.card__logo {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0.8125em 1.625em;
}

.card__logo.is--perla {
  margin: 0.625em 1.625em;
}

.card__logo.is--narrow {
  margin: 0.8125em 1.375em;
}

.card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card__brand {
  display: flex;
  flex-direction: column;
  gap: 0.875em;
  width: var(--card-side-width);
  padding: 0.4375em 0.4375em 0;
  border-left: 1px solid var(--color-line);
}

.card__brand.is--spread {
  justify-content: space-between;
  gap: 0;
  padding-bottom: 0.5625em;
}

.card__brand.is--gap-s {
  gap: 0.75em;
}

.label {
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.8333;
  text-transform: uppercase;
  color: var(--color-gold);
}

.label.is--light {
  color: var(--color-rule);
}

.card__brand-name {
  font-size: 1.875em;
  line-height: 0.8333;
}

.card__visual {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.card__visual img {
  width: min(81%, 18.75em);
  aspect-ratio: 1;
  object-fit: contain;
}

.card__product {
  width: 76%;
  max-height: 18.75em;
  object-fit: contain;
}

.card__specs {
  display: flex;
  justify-content: space-between;
  padding: 0 1.1667em 0.8333em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.6667;
}

.card__spec {
  display: flex;
  align-items: center;
  gap: 0.6667em;
}

.card__spec svg {
  width: 1.3333em;
  height: 1.3333em;
  flex-shrink: 0;
}

.card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5em;
}

.card__meta {
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-gold);
}

.card__meta.is--dark {
  color: var(--color-dark);
}

.card__meta .is--gold {
  color: var(--color-gold);
}

.intensity {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.intensity__bars {
  display: inline-flex;
  gap: 0.3333em;
}

.intensity__bars i {
  width: 0.8333em;
  height: 0.8333em;
  border-radius: 50%;
  background: var(--color-gold);
}

.intensity__bars i.is--on {
  background: var(--color-dark);
}

/* ------------------------- Soils ------------------------- */

.soils {
  padding: 3.6875em var(--gutter) 11.5em;
}

.soils__title {
  margin-bottom: 0.04em;
  font-size: 3.125em;
  line-height: 1.5;
}

.soils__lead {
  max-width: 39.1111em;
  margin-bottom: 1.9444em;
  font-size: 1.125em;
  line-height: 1.0556;
  font-weight: 400;
  color: var(--color-gold);
}

.soil {
  display: flex;
  flex-direction: column;
}

.soil__head {
  display: flex;
  height: var(--card-head-height);
  border: 1px solid var(--color-line);
}

.soil__place {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.375em;
  padding: 1em 0.75em 0.5625em;
}

.soil__name {
  font-size: 1.875em;
  line-height: 1;
}

.soil__factory {
  font-size: 1.125em;
  font-weight: 500;
}

.soil__region {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--card-side-width);
  padding: 0.1875em 0.5625em 0.5em;
  border-left: 1px solid var(--color-line);
}

.soil__flag {
  width: 3.25em;
  height: 1.8125em;
  object-fit: cover;
}

.soil__details {
  min-height: 7em;
  padding: 0.75em 1em;
  border: 1px solid var(--color-line);
  border-top: 0;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.1667;
  text-transform: uppercase;
  color: var(--color-gold);
}

.soil__details span {
  color: var(--color-dark);
}

.soil__leaf {
  height: 27.3125em;
  background: var(--color-leaf);
  border: 1px solid var(--color-line);
  border-top: 0;
  overflow: hidden;
}

.soil__leaf-inner {
  width: 100%;
  height: 100%;
}

.soil__leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-osmo);
}

.soil:hover .soil__leaf img {
  transform: rotate(4deg) scale(1.04);
}

.soil__desc {
  max-width: 24.8571em;
  margin-top: 0.7857em;
  font-size: 0.875em;
  line-height: 0.9286;
  font-weight: 500;
}

/* ------------------------- Steps (stair layout) ------------------------- */

.steps {
  padding: 0 var(--gutter) 7em;
}

.steps__title {
  margin-bottom: 0.58em;
  font-size: 3.125em;
  line-height: 1.5;
}

.steps__grid {
  align-items: start;
  row-gap: 2.5em;
}

.step {
  display: flex;
  flex-direction: column;
}

.step:nth-child(2) {
  margin-top: 12.875em;
}

.step:nth-child(3) {
  margin-top: 25.75em;
}

.step__title {
  margin-bottom: 0.7778em;
  font-size: 1.125em;
  line-height: 1.2222;
  font-weight: 500;
}

.step__media {
  aspect-ratio: 467 / 326;
  overflow: hidden;
  background: var(--color-leaf);
}

.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__text {
  max-width: 24.8571em;
  margin-top: 0.7143em;
  font-size: 0.875em;
  line-height: 0.9286;
  font-weight: 500;
}

/* ------------------------- Banners ------------------------- */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--banner-height);
  padding: 1.125em 1.5em 1.75em;
}

.banner.is--shop {
  padding-bottom: 2.25em;
}

.banner.is--lounge {
  padding: 0.75em 1.5em 1.5em;
}

.banner__title {
  max-width: 8.1em;
  font-size: 3.75em;
  line-height: 0.8333;
  color: var(--color-cream);
}

.banner__title.is--small {
  max-width: 7.28em;
  font-size: 3.125em;
  line-height: 0.8;
}

.banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.125em;
  max-width: 14.3125em;
}

.banner__content.is--lounge {
  gap: 1.25em;
}

.banner__eyebrow {
  font-size: 1.125em;
  line-height: 1.1111;
  font-weight: 500;
  color: var(--color-cream);
}

/* ------------------------- Collections ------------------------- */

.collection {
  padding: 0 var(--gutter);
}

.collection.is--perla {
  padding-top: 8.625em;
}

.collection.is--brick {
  padding-top: 6.3125em;
  padding-bottom: 6.75em;
}

.collection.is--perla-2 {
  padding-bottom: 6.5em;
}

.shop-grid {
  row-gap: 3.625em;
}

.collection.is--shop {
  padding-top: 4.125em;
  padding-bottom: 5em;
}

.collection__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 0.125em;
  border-bottom: 1px solid var(--color-line);
}

.collection__title {
  font-size: 1.5625em;
  line-height: 1.2;
  font-weight: 600;
}

.collection__link {
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}

.collection__toolbar {
  display: flex;
  justify-content: space-between;
  margin: 0.8125em 0 3.0625em;
}

.collection__toolbar.is--shop {
  margin-bottom: 4.1875em;
}

/* ------------------------- About ------------------------- */

.about {
  padding: 8.75em var(--gutter) 8.5em;
}

.about__title {
  margin-bottom: 0.2em;
  font-size: 3.75em;
  line-height: 1.2167;
}

.about__hero {
  width: 100%;
  height: 40.4375em;
  margin-bottom: 0.5625em;
  object-fit: cover;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 785fr) minmax(0, 622fr);
  gap: 0.5625em;
}

.about__col {
  display: flex;
  flex-direction: column;
  gap: 3.1875em;
}

.about__pair img {
  width: 100%;
  height: 30.25em;
  object-fit: cover;
}

.about__story {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1875em;
}

.about__stamp {
  align-self: flex-start;
  width: 14.875em;
  height: 18.5625em;
  margin-left: calc(-1 * var(--gutter));
  object-fit: contain;
}

.about__text {
  display: flex;
  flex: 1 1 22.5em;
  flex-direction: column;
  gap: 3.75em;
  max-width: 30.3125em;
  margin-top: 1.375em;
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 1.375em;
}

.about__copy p {
  font-size: 1.125em;
  line-height: 1.2222;
  font-weight: 400;
}

.about__collage {
  width: 100%;
  height: 100%;
  min-height: 70.5625em;
  object-fit: cover;
}

/* ------------------------- Family ------------------------- */

.family {
  padding: 0 var(--gutter) 10em;
}

.family__title {
  margin-bottom: 0.225em;
  font-size: 2.5em;
  line-height: 1.875;
}

.family__grid {
  row-gap: 2.5em;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.member__photo {
  width: 100%;
  max-width: 29.125em;
  aspect-ratio: 466 / 521;
  overflow: hidden;
}

.member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__name {
  margin-top: 1.5em;
  font-size: 0.875em;
  line-height: 1.1429;
  font-weight: 600;
}

.member__role {
  max-width: 10em;
  margin-top: 0.4em;
  font-size: 1.875em;
  line-height: 0.8333;
}

/* ------------------------- Footer ------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 1.25em;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 43.75em) 7.9375em minmax(0, 1fr) 14.8125em;
  padding: 0.75em var(--gutter) 0 1em;
  border-top: 1px solid var(--color-rule);
}

.footer__brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5.875em;
}

.footer__logo {
  display: block;
  color: var(--color-dark);
  line-height: 0;
  text-decoration: none;
}

.footer__logo:hover {
  color: var(--color-hover);
}

.footer__logo-svg {
  display: block;
  width: 21.5625em;
  height: auto;
}


.footer__clocks {
  display: flex;
  gap: 0.375em;
  margin-left: -0.25em;
}

.clock {
  width: 10.75em;
  height: 10.75em;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  padding-top: 0.0769em;
  font-size: 0.8125em;
  font-weight: 500;
  line-height: 1.6731;
}

.footer__nav a {
  color: var(--color-dark);
  text-decoration: none;
}

.footer__nav a:hover {
  color: var(--color-hover);
}

.footer__address {
  padding-top: 0.3077em;
  font-size: 0.8125em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1538;
  color: var(--color-dark);
}

.footer__address p {
  margin: 0 0 1.1538em;
}

.footer__address p.is--value {
  margin-bottom: 2.3077em;
  color: var(--color-rule);
}

.footer__address p.is--value.is--tight {
  margin-bottom: 1.1538em;
}

.footer__address a {
  color: var(--color-rule);
  text-decoration: none;
}

.footer__address a:hover {
  color: var(--color-hover);
}

/* ------------------------- Inner pages: shared ------------------------- */

.hero.is--page {
  height: auto;
  min-height: 43.75em;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.hero__eyebrow {
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.collection__count {
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-gold);
}

.collection__head.is--plain {
  align-items: baseline;
  padding-bottom: 0;
  border-bottom: 0;
}

.header__nav a[aria-current="page"],
.mobile-menu__list a[aria-current="page"] {
  background-position: 0% 100%;
  background-size: 100% 1px;
}

/* ------------------------- Portfolio: brand index ------------------------- */

.brand-index {
  padding: 8.625em var(--gutter) 9.5em;
}

.brand-index__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 0.8125em 0 3.0625em;
}

.brand-index__filters .text-btn {
  color: var(--color-gold);
  transition: color 0.2s ease;
}

.brand-index__filters .text-btn:hover,
.brand-index__filters .text-btn[aria-pressed="true"] {
  color: var(--color-dark);
}

.brand-row {
  display: grid;
  grid-template-columns: 3.5em minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2.5fr) auto;
  align-items: center;
  gap: 1.5em;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--color-line);
  transition: background-color 0.4s var(--ease-osmo);
}

.brand-row:first-child {
  border-top: 1px solid var(--color-line);
}

.brand-row[hidden] {
  display: none;
}

.brand-row:hover {
  background-color: var(--color-leaf);
}

.brand-row__num {
  padding-left: 0.5em;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--color-gold);
}

.brand-row__name {
  font-size: 1.875em;
  line-height: 1;
  transition: transform 0.6s var(--ease-osmo);
}

.brand-row:hover .brand-row__name {
  transform: translateX(0.4em);
}

.brand-row__cell {
  display: flex;
  flex-direction: column;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.1667;
  text-transform: uppercase;
}

.brand-row__cell .label {
  font-size: 1em;
  line-height: 1.1667;
}

.brand-row__action {
  padding-right: 0.5em;
}

.portfolio.is--page {
  padding-bottom: 0;
}

.soils.is--page {
  padding-top: 9.5em;
}

/* ------------------------- Family: generations ------------------------- */

.generations {
  padding: 2em var(--gutter) 10em;
}

.generations > .collection__head {
  margin-bottom: 3em;
}

.generation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--grid-gap);
  margin-bottom: 6em;
}

.generation:last-child {
  margin-bottom: 0;
}

.generation__label {
  position: sticky;
  top: 3em;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.generation__num {
  font-size: 7.5em;
  line-height: 0.8;
  color: var(--color-gold);
}

.generation__title {
  font-size: 3.125em;
  line-height: 0.9;
}

.generation__bio {
  max-width: 24em;
  font-size: 1em;
  line-height: 1.375;
  font-weight: 400;
}

.generation__members {
  row-gap: 2.5em;
}

/* ------------------------- Archive: timeline ------------------------- */

.timeline {
  padding: 8.625em 0 9.5em;
  overflow: hidden;
}

.timeline__head {
  padding: 0 var(--gutter);
  margin-bottom: 3em;
}

.timeline__track {
  display: flex;
  gap: 1.5em;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.timeline__track::-webkit-scrollbar {
  display: none;
}

[data-timeline-pinned="true"] .timeline__track {
  overflow: visible;
  will-change: transform;
}

.timeline__item {
  display: flex;
  flex: 0 0 26em;
  flex-direction: column;
  gap: 0.75em;
  padding-left: 0.75em;
  border-left: 1px solid var(--color-line);
}

.timeline__year {
  font-size: 7.5em;
  line-height: 0.85;
}

.timeline__media {
  aspect-ratio: 4 / 3;
  margin-top: 0.75em;
  background: var(--color-leaf);
  border: 1px solid var(--color-line);
  overflow: hidden;
}

.timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timeline__title {
  font-size: 1.875em;
  line-height: 0.9333;
}

.timeline__text {
  max-width: 26em;
  font-size: 0.875em;
  line-height: 1.1429;
  font-weight: 500;
}

.timeline__progress {
  height: 1px;
  margin: 3em var(--gutter) 0;
  background: var(--color-line);
}

.timeline__progress span {
  display: block;
  height: 100%;
  background: var(--color-dark);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ------------------------- Archive: story + gallery ------------------------- */

.about.is--page {
  padding-top: 0;
}

.about__collage.is--short {
  min-height: 0;
  height: 40em;
}

.gallery-section {
  padding: 0 var(--gutter) 10em;
}

.gallery-section > .collection__head {
  margin-bottom: 3em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2em var(--grid-gap);
}

.gallery__item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.gallery__item.is--full { grid-column: span 12; }
.gallery__item.is--half { grid-column: span 6; }
.gallery__item.is--wide { grid-column: span 8; }
.gallery__item.is--narrow { grid-column: span 4; }

.gallery__media {
  height: 30.25em;
  overflow: hidden;
  background: var(--color-leaf);
}

.gallery__item.is--full .gallery__media {
  height: 40.4375em;
}

.gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-osmo);
}

.gallery__item.is--contain .gallery__media img {
  object-fit: contain;
}

.gallery__item:hover .gallery__media img {
  transform: scale(1.03);
}

/* ------------------------- Retailer: stats ------------------------- */

.stats {
  padding: 8.625em var(--gutter) 9.5em;
}

.stats > .collection__head {
  margin-bottom: 3em;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 0.75em;
  border: 1px solid var(--color-line);
  min-height: 22em;
}

.stat__value {
  font-size: 7.5em;
  line-height: 0.85;
  margin-bottom: auto;
}

.stat__title {
  font-size: 1.125em;
  font-weight: 500;
}

.stat__text {
  max-width: 24em;
  font-size: 0.875em;
  line-height: 1.1429;
  font-weight: 500;
  color: var(--color-gold-muted);
}

/* ------------------------- Forms ------------------------- */

.apply {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--grid-gap);
  padding: 0 var(--gutter) 10em;
}

.apply.is--visit {
  padding-top: 10em;
}

.apply__intro {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.apply__title {
  font-size: 3.75em;
  line-height: 0.9;
}

.apply__text {
  max-width: 22em;
  font-size: 1em;
  line-height: 1.375;
  font-weight: 400;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2em 1.5em;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.form__field.is--full,
.form__actions.is--full {
  grid-column: 1 / -1;
}

.form__input {
  width: 100%;
  padding: 0.375em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  font: inherit;
  font-size: 1.125em;
  color: var(--color-dark);
  transition: border-color 0.3s ease;
}

textarea.form__input {
  resize: vertical;
  min-height: 6em;
}

.form__input:focus {
  outline: none;
  border-bottom-color: var(--color-dark);
}

.form__input[aria-invalid="true"] {
  border-bottom-color: #9c2b1c;
}

.form__field.is--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75em;
  font-size: 0.875em;
  line-height: 1.2857;
  font-weight: 500;
}

.form__check {
  width: 1.1429em;
  height: 1.1429em;
  margin: 0.0714em 0 0;
  accent-color: var(--color-dark);
}

.form__check[aria-invalid="true"] {
  outline: 1px solid #9c2b1c;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5em;
}

.btn-dark.is--submit {
  min-width: 14em;
  min-height: 3.3846em;
  cursor: pointer;
}

.form__error {
  font-size: 0.875em;
  font-weight: 500;
  color: #9c2b1c;
}

.form__success {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 2em 0;
  border-top: 1px solid var(--color-rule);
  font-size: 1em;
  line-height: 1.375;
}

.form__success[hidden] {
  display: none;
}

.form__success-title {
  font-size: 3.125em;
  line-height: 1;
}

/* ------------------------- Visit ------------------------- */

.plan {
  padding: 8.625em var(--gutter) 9.5em;
}

.plan > .collection__head,
.experiences > .collection__head {
  margin-bottom: 3em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3em;
  min-height: 12em;
  padding: 0.75em;
  border: 1px solid var(--color-line);
}

.info__value {
  font-size: 1.875em;
  line-height: 1;
}

.info__value a {
  text-decoration: none;
}

.experiences {
  padding: 0 var(--gutter);
}

.experience {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.experience__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-leaf);
}

.experience__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-osmo);
}

.experience:hover .experience__media img {
  transform: scale(1.04);
}

.experience__title {
  font-size: 1.875em;
  line-height: 0.9333;
}

.experience__text {
  max-width: 26em;
  font-size: 0.875em;
  line-height: 1.1429;
  font-weight: 500;
}

.locator {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: var(--banner-height);
  padding: 1.125em 1.5em 1.75em;
}

.locator__form {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  max-width: 30em;
}

.locator__row {
  display: flex;
  gap: var(--grid-gap);
}

.locator__input {
  flex: 1;
  min-width: 0;
  padding: 0 0.75em;
  background: transparent;
  border: 1px solid var(--color-cream);
  border-radius: 0;
  font: inherit;
  font-size: 0.875em;
  color: var(--color-cream);
}

.locator__input::placeholder {
  color: rgba(255, 240, 205, 0.6);
}

.locator__input:focus {
  outline: none;
  background: rgba(5, 0, 1, 0.35);
}

/* ------------------------- Store ------------------------- */

.collection.is--store {
  padding-top: 8.625em;
  padding-bottom: 9.5em;
}

.collection__toolbar.is--store {
  align-items: center;
  margin-bottom: 3.0625em;
}

.brand-index__filters.is--inline {
  margin: 0;
}

.sort__select {
  padding: 0.25em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  border-radius: 0;
  font: inherit;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
}

.card .btn-dark {
  cursor: pointer;
}

.btn-dark[data-state="added"] {
  background: var(--color-gold-muted);
}

/* ------------------------- Cart ------------------------- */

.cart {
  padding: 8.625em var(--gutter) 9.5em;
}

.cart > .collection__head {
  margin-bottom: 3em;
}

.cart__title {
  font-size: 3.75em;
  line-height: 1;
}

.cart__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
  padding: 4em 0;
}

.cart__empty[hidden],
.cart__layout[hidden] {
  display: none;
}

.cart__empty-text {
  font-size: 3.125em;
  line-height: 1;
}

.cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.5em;
  align-items: start;
}

.cart__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.cart-item {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr) auto 6em auto;
  align-items: center;
  gap: 1.5em;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--color-line);
}

.cart-item__media {
  aspect-ratio: 1;
  border: 1px solid var(--color-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__media img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.cart-item__name {
  font-size: 1.875em;
  line-height: 0.9333;
}

.cart-item__total {
  font-size: 0.875em;
  font-weight: 500;
  text-align: right;
}

.cart-item__remove {
  color: var(--color-gold-muted);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-rule);
}

.qty__btn {
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  background: none;
  border: 0;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.qty__btn:hover {
  background: var(--color-leaf);
}

.qty__value {
  min-width: 2em;
  font-size: 0.875em;
  font-weight: 500;
  text-align: center;
}

.cart__summary {
  position: sticky;
  top: 3em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 0.75em;
  border: 1px solid var(--color-line);
}

.cart__totals {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin: 0;
}

.cart__totals div {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.875em;
  font-weight: 500;
}

.cart__totals dd {
  margin: 0;
}

.cart__totals .is--total {
  padding-top: 0.75em;
  border-top: 1px solid var(--color-line);
  align-items: baseline;
}

.cart__totals .is--total dd {
  font-size: 2.1429em;
  line-height: 1;
}

.cart__summary .btn-dark.is--submit {
  width: 100%;
}

.cart__note {
  font-size: 0.75em;
  font-weight: 500;
  color: var(--color-gold-muted);
}

.grid-4.is--spaced {
  margin-top: 3em;
}

/* ------------------------- History Archive ------------------------- */

.archive-hero {
  margin-top: 2em;
}

.archive-hero img {
  display: block;
  width: 100%;
  height: 30.1875em;
  object-fit: cover;
}

.archive {
  padding: 3.1875em var(--gutter) 10em;
}

.archive__title {
  margin-bottom: 0.8182em;
  font-size: 3.4375em;
  line-height: 1;
}

.archive__list {
  display: flex;
  flex-direction: column;
  gap: 4.1875em;
}

.archive-collection__head {
  display: flex;
  flex-direction: column-reverse;
  margin: 0 0 3.4375em;
  font-weight: 700;
  text-transform: uppercase;
}

.archive-collection__title {
  padding-bottom: 0.2222em;
  border-bottom: 1px solid var(--color-line);
  font-size: 1.125em;
  line-height: 1;
}

.archive-collection__year {
  margin-top: 0.8333em;
  font-size: 0.75em;
  line-height: 1.5;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5625em;
}

.archive-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 275 / 310;
  padding: 0.6875em 0.625em 0.625em;
  border: 1px solid var(--color-line);
  text-align: center;
  transition: background-color 0.4s var(--ease-osmo);
}

.archive-tile:hover {
  background-color: #f7e6bb;
}

.archive-tile__brand {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}

.archive-tile__band {
  position: relative;
  width: 84%;
}

.archive-tile__band img {
  display: block;
  width: 100%;
  height: auto;
}

.archive-tile__name {
  margin: 0;
  font-size: 1em;
  line-height: 1.0625;
  text-transform: uppercase;
}

/* ------------------------- Hover ------------------------- */

/* Buttons: label rolls up, its copy (text-shadow) rolls in from below */
.btn-cream,
.btn-dark {
  overflow: hidden;
}

.btn__text {
  display: block;
  line-height: 1.2;
  text-shadow: 0 2.4em currentColor;
  transition: transform 0.6s var(--ease-osmo);
}

.btn-cream:hover .btn__text,
.btn-dark:hover .btn__text,
.btn-cream:focus-visible .btn__text,
.btn-dark:focus-visible .btn__text {
  transform: translateY(-2.4em);
}

/* Text links: hairline draws in from the left, leaves to the right */
.header__nav a,
.footer__nav a,
.footer__address a,
.collection__link,
.mobile-menu__list a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s var(--ease-osmo), color 0.2s ease;
}

.header__nav a:hover,
.footer__nav a:hover,
.footer__address a:hover,
.collection__link:hover,
.mobile-menu__list a:hover {
  background-position: 0% 100%;
  background-size: 100% 1px;
}

/* Cigar: lifted and turned, like picking it out of the box */
.card__visual img {
  transition: transform 0.9s var(--ease-osmo);
}

.card:hover .card__visual img {
  transform: rotate(-7deg) scale(1.05);
}

.card__product {
  transition: transform 0.9s var(--ease-osmo);
}

.card:hover .card__product {
  transform: scale(1.05);
}

/* Family stamps: picked up off the page */
.member__photo {
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.member:hover .member__photo {
  transform: rotate(-1.5deg) scale(1.02);
}

/* ------------------------- Animation start states (JS on, motion allowed) ------------------------- */

.is-anim [data-anim-heading],
.is-anim [data-anim-fade],
.is-anim [data-anim-card],
.is-anim [data-anim-stamp],
.is-anim [data-hero-title],
.is-anim [data-hero-aside] {
  visibility: hidden;
}

.split-line {
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

/* ------------------------- Tablet ------------------------- */

@media screen and (max-width: 991px) {
  .step:nth-child(2) {
    margin-top: 6em;
  }

  .step:nth-child(3) {
    margin-top: 0;
  }

  .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .split.is--reverse > :first-child {
    order: 2;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3em 1.5em;
  }

  .intro__image {
    flex-basis: 100%;
    width: 100%;
  }

  .about__collage {
    min-height: 0;
    height: auto;
  }
  .brand-row {
    grid-template-columns: 2.5em minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .brand-row__cell:not(:nth-of-type(1)) {
    display: none;
  }

  .generation {
    grid-template-columns: minmax(0, 1fr);
    gap: 2em;
  }

  .generation__label {
    position: static;
  }

  .gallery__item.is--wide,
  .gallery__item.is--narrow {
    grid-column: span 6;
  }
  .apply,
  .cart__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3em;
  }

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

  .cart__summary {
    position: static;
  }
}

/* ------------------------- Mobile Landscape ------------------------- */

@media screen and (max-width: 767px) {
  .grid-4,
  .grid-3,
  .grid-2,
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .header__nav {
    display: none;
  }


  .step:nth-child(2),
  .step:nth-child(3) {
    margin-top: 0;
  }

  .header__brand {
    position: static;
    transform: none;
  }

  .header__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 2.75em;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
  }

  .header {
    height: 3em;
  }

  .mobile-menu {
    position: fixed;
    inset: 3em 0 auto 0;
    z-index: 49;
    display: block;
    padding: 1em var(--gutter) 2em;
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-rule);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-menu__list a {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.5em;
    line-height: 1.1;
    text-decoration: none;
  }

  .hero__title {
    font-size: 2.75em;
    line-height: 0.9091;
  }

  .hero__aside,
  .hero__cta {
    width: 100%;
  }

  .intro__text,
  .about__title {
    font-size: 2.5em;
    line-height: 0.95;
  }

  .banner__title,
  .banner__title.is--small {
    font-size: 2.5em;
    line-height: 0.95;
  }

  .about__hero {
    height: 22em;
  }

  .about__pair img {
    height: 24em;
  }

  .footer__logo-svg {
    width: 17em;
  }
  .brand-row {
    grid-template-columns: 2em minmax(0, 1fr);
    gap: 0.75em;
  }

  .brand-row__cell,
  .brand-row__action {
    grid-column: 2;
  }

  .brand-row__cell:nth-of-type(1) {
    display: flex;
  }

  .timeline__track {
    flex-direction: column;
    gap: 3em;
  }

  .timeline__item {
    flex-basis: auto;
  }

  .timeline__year {
    font-size: 5em;
  }

  .timeline__progress {
    display: none;
  }

  .gallery__item.is--half,
  .gallery__item.is--wide,
  .gallery__item.is--narrow {
    grid-column: span 12;
  }

  .gallery__media,
  .gallery__item.is--full .gallery__media {
    height: 22em;
  }

  .generation__num {
    font-size: 5em;
  }

  .hero.is--page {
    min-height: 34em;
  }
  .form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection__toolbar.is--store {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }

  .cart-item {
    grid-template-columns: 5em minmax(0, 1fr);
    gap: 0.75em 1em;
  }

  .cart-item .qty,
  .cart-item__total,
  .cart-item__remove {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }

  .stat__value {
    font-size: 5em;
  }

  .locator__row {
    flex-direction: column;
  }

  .locator__input {
    min-height: 3em;
  }
}

/* ------------------------- State helpers ------------------------- */

[data-form-fields][hidden] {
  display: none;
}

[data-cart-count] {
  display: inline-block;
}

/* ------------------------- Desktop / mobile-only content ------------------------- */

@media screen and (min-width: 768px) {
  .u-mobile,
  .header__cart,
  .mobile-menu {
    display: none !important;
  }

  .step__num {
    display: none;
  }
}

/* ------------------------- Mobile (Home – Mobile + Mobile Menu artboards, 402px design) ------------------------- */

@media screen and (max-width: 767px) {
  .u-desktop {
    display: none !important;
  }

  /* Header: Menu · logo · Cart */
  .header {
    height: 2.3125em;
    padding: 0.375em 0.625em 0;
  }

  .header__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .header__logo {
    width: 11.9375em;
  }

  .header__toggle,
  .header__cart {
    display: inline-flex;
    align-items: center;
    min-height: 2.3077em;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.8125em;
    font-weight: 700;
    text-transform: none;
    color: var(--color-dark);
    text-decoration: none;
    cursor: pointer;
  }

  .header__cart {
    margin-left: auto;
  }

  /* Mobile menu (full screen) */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    max-height: none;
    padding: 0;
    overflow-y: auto;
    background: var(--color-cream);
    border: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }

  .mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    height: 5.5385em;
    padding: 0.9231em 0.7692em 0;
    font-size: 0.8125em;
    font-weight: 700;
  }

  .mobile-menu__close {
    min-height: 2.3077em;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--color-dark);
    cursor: pointer;
  }

  .mobile-menu__logo {
    display: block;
    font-size: 1.2308em;
    line-height: 0;
    color: var(--color-dark);
  }

  .mobile-menu__logo-svg {
    display: block;
    width: 11.9375em;
    height: auto;
  }

  .mobile-menu__cart {
    display: flex;
    align-items: center;
    min-height: 2.3077em;
    text-decoration: none;
  }

  .mobile-menu__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1em 0.5625em 0;
  }

  .mobile-menu__big,
  .mobile-menu__list {
    font-size: 1.625em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-menu__big {
    line-height: 1.2308;
    text-decoration: none;
  }

  .mobile-menu__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375em;
    margin: 1em 0 2.125em;
  }

  .mobile-menu__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 9.1875em;
    padding: 1.75em 0.375em 0.375em;
    border: 1px solid var(--color-line);
    text-decoration: none;
    text-align: center;
  }

  .mobile-menu__tile img {
    width: 76%;
    height: auto;
  }

  .mobile-menu__tile span {
    font-size: 1em;
    line-height: 1.0625;
    text-transform: uppercase;
  }

  .mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    line-height: 1.3462;
    list-style: none;
  }

  .mobile-menu__list a {
    display: block;
    font-family: var(--font-sans);
    font-size: 1em;
    line-height: inherit;
    text-decoration: none;
  }

  .mobile-menu__social {
    display: flex;
    justify-content: space-between;
    padding: 2em 0.4615em 1.2308em 0.7692em;
    font-size: 0.8125em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .mobile-menu__social a {
    text-decoration: none;
  }

  /* Buttons */
  .btn-cream {
    min-width: 15.75em;
    min-height: 2.5em;
    padding: 0 1em;
  }

  .btn-dark {
    min-width: 9.25em;
    min-height: 2.5em;
    font-size: 0.75em;
  }

  /* Hero */
  .hero__content.is--home {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em;
    padding: 0 0.5625em 2.125em;
  }

  .hero__heading.is--home {
    gap: 0.75em;
  }

  .hero__title {
    max-width: 9.25em;
    font-size: 2.5em;
    line-height: 0.85;
  }

  .hero__lead-m {
    max-width: 15.8462em;
    font-size: 0.8125em;
    line-height: 1;
    font-weight: 500;
  }

  .hero__cta {
    margin-top: 0.375em;
  }

  .btn-cream.is--hero-m {
    width: 15.75em;
    min-width: 0;
    font-size: 0.75em;
  }

  /* Intro */
  .intro {
    display: block;
    padding: 4.125em 0.625em 8.25em;
  }

  .intro__text.is--mobile {
    max-width: none;
    margin: 0 0 1em;
    padding: 0;
    font-size: 1.875em;
    line-height: 0.9667;
    text-transform: capitalize;
  }

  .intro__image {
    width: 16.875em;
    max-width: 100%;
    margin-left: -0.625em;
  }

  /* Portfolio: Brick House feature → cards → accessories feature → products */
  .portfolio {
    gap: 7.625em;
    padding: 0 0.5625em;
  }

  .split {
    gap: 0;
  }

  .split .grid-2 {
    row-gap: 6.125em;
  }

  .split:not(.is--reverse) .grid-2 {
    row-gap: 5.9375em;
    padding-top: 2.3125em;
  }

  .feature,
  .feature.is--first,
  .feature.is--alt {
    min-height: 35em;
    padding: 1em 0.5625em 1.375em;
  }

  .feature.is--alt {
    min-height: 37.5em;
  }

  .feature__title,
  .feature__title.is--narrow {
    max-width: 7.3333em;
    font-size: 1.875em;
    line-height: 0.8667;
  }

  .feature__content {
    gap: 0.75em;
    max-width: 12.5em;
  }

  .feature__content .body-bold,
  .banner__content .body-bold {
    font-size: 0.75em;
    line-height: 1.0833;
  }

  .card__box {
    height: 32.4375em;
  }

  .card__box.is--product {
    height: 25.875em;
  }

  .card__logo {
    margin: 0.8125em 1.25em;
  }

  .card .label {
    font-size: 0.8125em;
    line-height: 1.5385;
  }

  .card__visual img {
    width: min(82%, 18.75em);
  }

  .card__specs {
    padding: 0 2.7692em 0.9231em;
    font-size: 0.8125em;
    line-height: 1.5385;
  }

  .card__foot {
    padding-top: 0.375em;
  }

  .card__meta {
    font-size: 0.8125em;
    line-height: 1.5385;
  }

  /* Three soils: horizontal snap scroller */
  .soils {
    padding: 5.875em 0 0;
  }

  .soils__title {
    margin: 0 0.25em 0.2em;
    font-size: 2.5em;
    line-height: 1.2;
  }

  .soils__lead {
    max-width: 23.2143em;
    margin: 0 0.7143em 2em;
    font-size: 0.875em;
    line-height: 1.0714;
    font-weight: 500;
  }

  .soils .grid-3 {
    display: flex;
    gap: 0.5625em;
    padding: 0 0.5625em 0.5em 0.625em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .soils .grid-3::-webkit-scrollbar {
    display: none;
  }

  .soil {
    flex: 0 0 19.75em;
    scroll-snap-align: start;
  }

  .soil__head {
    height: 4.5em;
  }

  .soil__place {
    gap: 0.375em;
    padding: 0.5em;
  }

  .soil__name {
    font-size: 1.25em;
  }

  .soil__factory {
    font-size: 0.75em;
    font-weight: 700;
  }

  .soil__region {
    width: 4.8125em;
    padding: 0.125em 0.5em 0.5em;
  }

  .soil__flag {
    width: 2.25em;
    height: 1.25em;
  }

  .soil__details {
    min-height: 6em;
    padding: 1em 0.8em;
    font-size: 0.625em;
    line-height: 1.1;
  }

  .soil__leaf {
    height: 25.625em;
  }

  .soil__desc {
    max-width: 19.8333em;
    margin-top: 0.75em;
    font-size: 0.75em;
    line-height: 1.0833;
  }

  /* Three steps: title, then image + numbered note */
  .steps {
    padding: 6.875em 0.5625em 7.1875em;
  }

  .steps__title {
    display: none;
  }

  .steps__grid {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .step {
    display: grid;
    grid-template-columns: minmax(0, 254fr) minmax(0, 121fr);
    column-gap: 0.5625em;
    align-items: start;
  }

  .step__title {
    grid-column: 1 / -1;
    margin-bottom: 0.2em;
    font-family: var(--font-serif);
    font-size: 1.875em;
    font-weight: 400;
    line-height: 1;
  }

  .step__media {
    aspect-ratio: 254 / 169;
  }

  .step__text {
    max-width: none;
    margin-top: 0;
    font-size: 0.75em;
    line-height: 1.0833;
  }

  .step__num {
    display: block;
    color: var(--color-gold);
  }

  /* Lounge banner */
  .banner.is--lounge {
    min-height: 37.5em;
    padding: 1em 0.5625em 1.375em;
  }

  .banner__title.is--small {
    max-width: 7.3333em;
    font-size: 1.875em;
    line-height: 0.8667;
  }

  .banner__content,
  .banner__content.is--lounge {
    gap: 0.75em;
    max-width: 12.5em;
  }

  .banner__eyebrow {
    font-size: 0.875em;
    font-weight: 700;
  }

  /* About */
  .about {
    padding: 8.0625em 0.5625em 0;
  }

  .about__title {
    margin-bottom: 0.15em;
    font-size: 2.5em;
    line-height: 1.2;
  }

  .about__grid,
  .about__col {
    display: block;
  }

  .about__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4375em;
  }

  .about__pair img {
    width: 100%;
    height: auto;
    aspect-ratio: 189 / 337;
  }

  .about__story {
    display: grid;
    grid-template-columns: minmax(0, 112fr) minmax(0, 261fr);
    gap: 0.75em;
    margin-top: 1.625em;
  }

  .about__stamp {
    width: 100%;
    height: auto;
    margin-left: 0;
  }

  .about__text {
    gap: 1.25em;
    margin-top: 0;
    max-width: none;
  }

  .about__copy {
    gap: 1em;
  }

  .about__copy p {
    max-width: 19.75em;
    font-size: 0.75em;
    line-height: 1;
    font-weight: 500;
  }

  .about__copy p:first-child {
    max-width: none;
    font-family: var(--font-serif);
    font-size: 1.25em;
    line-height: 0.95;
    font-weight: 400;
  }

  .btn-dark.is--learn {
    min-width: 10.1667em;
    min-height: 2.5em;
  }

  .about__collage-pic,
  .about__collage {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .about__collage-pic {
    margin: 2.5em 0 7.5em;
  }

  /* Footer: logo + nav, then the two clocks */
  .footer {
    min-height: 0;
    padding-bottom: 0;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo nav" "clocks clocks";
    gap: 9.375em 1em;
    padding: 0.625em 0.5625em 2.25em;
  }

  .footer__brand-col {
    display: contents;
  }

  .footer__logo {
    grid-area: logo;
    align-self: start;
  }

  .footer__logo-svg {
    width: 8.125em;
  }

  .footer__nav {
    grid-area: nav;
    min-width: 8.7857em;
    padding-top: 0;
    font-size: 0.875em;
    line-height: 1.2857;
    font-weight: 700;
  }

  .footer__clocks {
    grid-area: clocks;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375em;
    margin-left: 0;
  }

  .clock {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}

/* ------------------------- History Archive: tablet + mobile ------------------------- */

@media screen and (max-width: 991px) {
  .archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .archive-hero {
    margin-top: 3.9375em;
  }

  .archive-hero img {
    height: 38.875em;
  }

  .archive {
    padding: 5.625em 0.5625em 7.5em;
  }

  .archive__title {
    margin: 0;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--color-line);
    font-size: 2.5em;
    line-height: 1.1;
  }

  .archive__list {
    gap: 4.375em;
    margin-top: 1em;
  }

  .archive-collection__head {
    flex-direction: row;
    gap: 5.8462em;
    margin-bottom: 4.1538em;
    font-size: 0.8125em;
    line-height: 1.3846;
  }

  .archive-collection__title,
  .archive-collection__year {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1em;
    line-height: inherit;
  }

  .archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375em;
  }

  .archive-tile {
    aspect-ratio: 189 / 212;
    padding: 0.625em 0.375em 0.25em;
  }

  .archive-tile__brand {
    visibility: hidden;
  }
}

/* ------------------------- Cigar Brand Single (Brick House) ------------------------- */

.brand-hero {
  display: grid;
  grid-template-columns: minmax(0, 715fr) minmax(0, 705fr);
  gap: 0.5em;
  margin-top: 2em;
  padding: 3px var(--gutter) 0 0;
}

.brand-hero__media img {
  display: block;
  width: 100%;
  height: 54.75em;
  object-fit: cover;
}

.brand-hero__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3em;
  padding-top: 3.625em;
}

.brand-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.brand-hero__title {
  font-size: 3.75em;
  line-height: 0.9;
  text-transform: uppercase;
}

.brand-hero__text {
  max-width: 36.625em;
  font-size: 1em;
  line-height: 1.2188;
  font-weight: 500;
}

.line-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5em;
}

.line-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  aspect-ratio: 230 / 310;
  padding: 0.6875em 0.625em 0.625em;
  border: 1px solid var(--color-line);
  color: var(--color-dark);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.4s var(--ease-osmo);
}

.line-tile:hover {
  background-color: #f7e6bb;
  color: var(--color-dark);
}

.line-tile__brand {
  font-size: 0.625em;
  font-weight: 700;
  text-transform: uppercase;
}

.line-tile__band {
  position: relative;
  display: block;
  width: 90%;
}

.line-tile__band img {
  display: block;
  width: 100%;
  height: auto;
}

.line-tile__name {
  font-size: 0.875em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Shop Brick House */
.collection.is--brand-shop {
  padding: 12.1875em var(--gutter) 0;
}

.is--brand-shop .collection__toolbar {
  margin: 0.75em 0 2.125em;
}

.card.is--brand .card__logo {
  margin: 0.875em 1.25em;
}

.card.is--brand .card__brand {
  width: 6.125em;
}

.card.is--brand .label {
  line-height: 1.5833;
}

.card.is--brand .card__brand-name {
  font-size: 1.5em;
  line-height: 0.9167;
}

.card__visual.is--upright {
  min-height: 0;
}

.card__visual.is--upright img {
  width: auto;
  height: 18.75em;
  aspect-ratio: auto;
  transform: rotate(42deg);
}

.card:hover .card__visual.is--upright img {
  transform: rotate(36deg) scale(1.04);
}

/* Line sections */
.line {
  padding: 7em 0 7.4375em;
}

.line.is--first {
  padding-top: 12.5em;
}

.line__grid {
  display: grid;
  grid-template-columns: minmax(0, 625fr) minmax(0, 467fr);
  column-gap: 12.3125em;
  align-items: start;
  padding: 0 8.6875em 0 var(--gutter);
}

.line__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 625 / 781;
}

.line__media img {
  display: block;
  width: 100%;
  height: auto;
}

.line__info {
  display: flex;
  flex-direction: column;
}

.line__title {
  margin-bottom: 0.475em;
  font-size: 2.5em;
  line-height: 1;
}

.line__panel {
  display: flex;
  flex-direction: column;
  gap: 2.8333em;
  padding: 1.25em 0.75em 0.75em;
  border: 1px solid var(--color-line);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.5833;
  text-transform: uppercase;
}

.line__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6667em;
  text-transform: none;
}

.line__band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 467 / 320;
  border: 1px solid var(--color-line);
  border-top: 0;
}

.line__band img {
  display: block;
  width: 89%;
  height: auto;
}

.line__desc {
  max-width: 33.9286em;
  margin-top: 0.6429em;
  font-size: 0.875em;
  line-height: 1.3286;
  font-weight: 500;
}

.line-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2.8333em;
  margin: 3.25em 0 0;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.625;
  text-transform: uppercase;
}

.line-facts__col {
  min-width: 16.3333em;
}

.line-facts__col + .line-facts__col {
  min-width: 14.8333em;
}

.line-facts dt,
.line-facts dd {
  display: inline;
}

.line-facts dd {
  margin: 0;
  font-weight: 500;
  color: var(--color-hover);
}

.btn-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75em;
  margin-top: 3.8333em;
  background: #0f9a3a;
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.btn-buy:hover {
  background: #0b7c2e;
  color: #fff;
}

.line__wide {
  padding: 0 var(--gutter);
}

.line__wide img {
  display: block;
  width: 100%;
  height: 30.0625em;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .brand-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .brand-hero__info {
    padding: 2em var(--gutter) 0;
  }

  .line__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2em;
    padding: 0 var(--gutter);
  }
}

@media screen and (max-width: 767px) {
  .brand-hero {
    display: block;
    margin-top: 2.3125em;
    padding: 0;
  }

  .brand-hero__media img {
    height: 30em;
  }

  .brand-hero__info {
    gap: 0;
    padding: 1.75em 0 0;
  }

  .brand-hero__copy {
    gap: 0;
  }

  .brand-hero__title {
    margin: 0 0.25em 0.3em;
    font-size: 2.5em;
    line-height: 0.95;
  }

  .brand-hero__text {
    max-width: none;
    margin: 0 0.7143em 2em;
    font-size: 0.875em;
    line-height: 1.2143;
  }

  .line-tiles,
  .brand-cards {
    display: flex;
    gap: 0.375em;
    padding: 0 0.5625em 0.5em 0.625em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .line-tiles::-webkit-scrollbar,
  .brand-cards::-webkit-scrollbar {
    display: none;
  }

  .line-tile {
    flex: 0 0 9.375em;
    height: 12.5em;
    aspect-ratio: auto;
    padding: 0.625em 0.5em;
    scroll-snap-align: start;
  }

  .line-tile__band {
    width: 100%;
  }

  .collection.is--brand-shop {
    padding: 5em 0 0;
  }

  .is--brand-shop .collection__head {
    margin: 0 0.5625em;
  }

  .is--brand-shop .collection__title {
    font-size: 1.375em;
    line-height: 1;
  }

  .is--brand-shop .collection__toolbar {
    margin: 0.625em 0.5625em 1.5em;
  }

  .brand-cards {
    gap: 0.5625em;
  }

  .card.is--brand {
    flex: 0 0 20.625em;
    scroll-snap-align: start;
  }

  .card.is--brand .card__title {
    margin-bottom: 0.3333em;
    font-size: 1.5em;
    line-height: 1;
  }

  .card.is--brand .card__box {
    height: 28.75em;
  }

  .card.is--brand .card__head {
    height: 5.25em;
  }

  .card.is--brand .card__logo {
    margin: 0.75em 1em;
  }

  .card.is--brand .card__brand {
    width: 5.75em;
    gap: 0.5em;
    padding: 0.375em;
  }

  .card.is--brand .card__brand-name {
    font-size: 1.375em;
    line-height: 0.9091;
  }

  .card.is--brand .card__visual.is--upright img {
    height: 16.25em;
  }

  .card.is--brand .card__specs {
    padding: 0 1em 0.8333em;
    font-size: 0.75em;
  }

  .card.is--brand .card__meta {
    font-size: 0.75em;
    line-height: 1.5;
  }

  .card.is--brand .btn-dark {
    min-height: 3em;
  }

  .line,
  .line.is--first {
    padding: 4.375em 0 3.75em;
  }

  .line__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0.5625em;
    row-gap: 0;
  }

  .line__info {
    display: contents;
  }

  .line__title {
    order: -1;
    margin-bottom: 0.4em;
    font-size: 1.875em;
  }

  .line__media {
    aspect-ratio: auto;
    margin-bottom: 1em;
  }

  .line__panel {
    gap: 0;
    padding: 0;
  }

  .line__meta {
    padding: 1em 0.75em 0.75em;
  }

  .line__specs {
    padding: 0.7692em 1.2308em;
    border-top: 1px solid var(--color-line);
    font-size: 1.0833em;
    line-height: 1.5385;
  }

  .line__band {
    aspect-ratio: 384 / 240;
  }

  .line__band img {
    width: 86%;
  }

  .line__desc {
    max-width: none;
    margin-top: 0.7692em;
    font-size: 0.8125em;
    line-height: 1.3077;
  }

  .line-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.0909em;
    margin-top: 2.1818em;
    font-size: 0.6875em;
    line-height: 1.6364;
  }

  .line-facts__col,
  .line-facts__col + .line-facts__col {
    min-width: 0;
  }

  .btn-buy {
    min-height: 3.6667em;
    margin-top: 2.3333em;
  }

  .line__wide {
    padding: 0 0.5625em;
  }

  .line__wide img {
    height: 15em;
  }
}

/* ------------------------- Family page ------------------------- */

.page-banner {
  margin-top: 2em;
}

.page-banner img {
  display: block;
  width: 100%;
  height: 30.1875em;
  object-fit: cover;
}

.intro.is--family {
  align-items: center;
  gap: 2.5em;
  padding: 9.4375em 1em 12.8125em 0.75em;
}

.intro.is--family .intro__text {
  margin-top: 0;
}

.intro.is--family .intro__image {
  flex: 0 1 34.875em;
  width: 34.875em;
}

.about.is--family {
  padding: 0 var(--gutter) 12.5em;
}

.about.is--family .about__col {
  gap: 3.875em;
}

.about__copy.is--family {
  max-width: 36.5625em;
  gap: 1.25em;
}

.about__copy.is--family p {
  font-size: 1em;
  line-height: 1.25;
  font-weight: 500;
}

.family.is--page {
  padding-bottom: 12.5em;
}

.family.is--page .family__title {
  margin-bottom: -0.35em;
}

.family.is--page .family__grid {
  column-gap: 0.5625em;
  row-gap: 2.75em;
}

.family.is--page .member__name {
  margin-top: 1.5em;
  font-size: 0.75em;
  line-height: 1.1667;
}

.family.is--page .member__role {
  max-width: 12.4167em;
  margin-top: 0.375em;
  font-size: 1.5em;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .page-banner {
    margin-top: 2.3125em;
  }

  .page-banner img {
    height: 18.75em;
  }

  .intro.is--family {
    display: block;
    padding: 3.75em 0.625em 5.625em;
  }

  .intro.is--family .intro__text {
    max-width: none;
    margin: 0 0 1.2em;
    padding: 0;
    font-size: 1.875em;
    line-height: 0.9667;
  }

  .intro.is--family .intro__image {
    width: 100%;
    margin-left: 0;
  }

  .about.is--family {
    padding: 0 0.5625em 6.25em;
  }

  .about.is--family .about__title {
    margin-bottom: 0.2em;
    font-size: 2.5em;
    line-height: 1.1;
  }

  .about.is--family .about__hero {
    display: block !important;
    height: 16.25em;
    margin-bottom: 0.4375em;
  }

  .about.is--family .about__pair img {
    aspect-ratio: 189 / 240;
    object-fit: cover;
  }

  .about__copy.is--family {
    max-width: none;
    gap: 1em;
    margin: 1.75em 0 2em;
  }

  .about__copy.is--family p,
  .about__copy.is--family p:first-child {
    max-width: none;
    font-family: var(--font-sans);
    font-size: 0.875em;
    line-height: 1.2857;
    font-weight: 500;
  }

  .about.is--family .about__collage {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 384 / 630;
    object-fit: cover;
  }

  .family.is--page {
    display: block !important;
    padding: 0 0.5625em 6.875em;
  }

  .family.is--page .family__title {
    margin-bottom: 0.35em;
    font-size: 2.5em;
    line-height: 1.1;
  }

  .family.is--page .family__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.375em;
    row-gap: 1.75em;
  }

  .family.is--page .member__name {
    margin-top: 1.0909em;
    font-size: 0.6875em;
    line-height: 1.1818;
  }

  .family.is--page .member__role {
    margin-top: 0.3333em;
    font-size: 1.125em;
  }
}

@media screen and (max-width: 767px) {
  /* Home – Mobile shows the cap before the Lego set */
  .split.is--reverse .grid-2 > :first-child {
    order: 2;
  }
}

/* ------------------------- Single product (Brand Single design language) ------------------------- */

.line.is--product {
  padding-top: 7em;
}

.line__media.is--product {
  padding: 3em;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
}

.line__media.is--product img {
  width: 82%;
  height: auto;
  margin: auto;
  object-fit: contain;
}

.product__crumbs {
  display: flex;
  gap: 0.5em;
  margin-bottom: 1.25em;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
}

.product__crumbs a {
  color: var(--color-gold);
  text-decoration: none;
}

.product__crumbs a:hover {
  color: var(--color-dark);
}

.product__price {
  margin-bottom: 0.6667em;
  font-size: 1.875em;
  line-height: 1;
}

.product__buy {
  display: flex;
  gap: 0.5em;
  margin-top: 2.875em;
}

.product__qty {
  width: 3em;
  height: 2.75em;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.875em;
  font-weight: 500;
  text-align: center;
  color: var(--color-dark);
  -moz-appearance: textfield;
}

.product__qty::-webkit-inner-spin-button,
.product__qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn-buy.is--cart {
  flex: 1;
  margin-top: 0;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.btn-buy.is--cart[data-state="added"] {
  background: #0b7c2e;
}

.product__ship {
  align-self: flex-start;
  margin-top: 1.25em;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}

.collection.is--related {
  padding: 8em var(--gutter) 9.5em;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

a.card__box {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .line.is--product {
    padding-top: 4.375em;
  }

  .product__crumbs {
    order: -2;
  }

  .line__media.is--product {
    padding: 1.5em;
  }

  .product__buy {
    margin-top: 2em;
  }

  .btn-buy.is--cart {
    min-height: 3.6667em;
  }

  .collection.is--related {
    padding: 5em 0.5625em 6em;
  }
}

/* ------------------------- Store (Store artboard) ------------------------- */

.store-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 26.25em;
  margin-top: calc(2em + 3px);
  padding: 0.8125em var(--gutter) 1.75em;
}

.store-hero__title {
  font-size: 4.375em;
  line-height: 0.8571;
  color: var(--color-cream);
}

.store-hero__text {
  max-width: 23.5714em;
  font-size: 0.875em;
  line-height: 1.0714;
  font-weight: 500;
  color: var(--color-cream);
}

.store__filters {
  padding: 3em var(--gutter) 0;
}

.store__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding-bottom: 0.875em;
  border-bottom: 1px solid var(--color-rule);
}

.store__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375em;
}

.tab {
  min-height: 2.6667em;
  padding: 0 1.1667em;
  background: transparent;
  border: 1px solid var(--color-rule);
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-osmo), color 0.3s var(--ease-osmo), border-color 0.3s ease;
}

.tab:hover {
  border-color: var(--color-dark);
}

.tab[aria-pressed="true"] {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-cream);
}

.store__bar {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  font-size: 0.75em;
  font-weight: 700;
}

.store__tools {
  display: flex;
  gap: 1.6667em;
}

.store__bar .text-btn {
  font-size: 1em;
}

.store__section {
  padding: 2.875em var(--gutter) 0;
}

.store__section.is--acc {
  padding-top: 6em;
}

.store__heading {
  margin-bottom: 1.2em;
  font-size: 1.5625em;
  line-height: 0.8;
  font-weight: 700;
}

.store__grid {
  row-gap: 3.625em;
}

.card__box.is--acc {
  height: 22.4375em;
}

.card__box.is--acc .card__product {
  width: auto;
  max-width: 76%;
  max-height: 15.625em;
}

.card__visual.is--upright.is--short img {
  height: 16.25em;
}

.store__empty {
  margin: 3.75em var(--gutter) 0;
  font-size: 0.875em;
  font-weight: 700;
}

.text-btn.is--link {
  font-size: 1em;
  text-decoration: underline;
}

/* Index view: compact list of names + prices */
[data-view="index"] .store__grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

[data-view="index"] .store__grid > .card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--color-line);
}

[data-view="index"] .store__grid .card__box,
[data-view="index"] .store__grid .card__meta {
  display: none;
}

[data-view="index"] .store__grid .card__title {
  margin: 0;
}

.store-retailer {
  padding: 7.5em var(--gutter) 10em;
}

.store-retailer__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 26.25em;
  padding: 1em 1em 1.375em;
}

.store-retailer__title {
  max-width: 8.6667em;
  font-size: 3.75em;
  line-height: 0.8667;
  color: var(--color-cream);
}

.store-retailer__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875em;
  max-width: 16.875em;
}

.store-retailer__content p {
  font-size: 0.875em;
  line-height: 1.0714;
  font-weight: 500;
  color: var(--color-cream);
}

/* ------------------------- Product Single (Product Single artboard) ------------------------- */

.pcrumbs {
  display: flex;
  gap: 0.6667em;
  margin-top: 2.6667em;
  padding: 1em 1em 0;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-gold);
}

.pcrumbs a {
  color: var(--color-gold);
  text-decoration: none;
}

.pcrumbs a:hover,
.pcrumbs [aria-current] {
  color: var(--color-dark);
}

.prod {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5625em;
  padding: 0.75em var(--gutter) 0;
}

.pgallery {
  display: flex;
  flex-direction: column;
  gap: 0.5625em;
}

.pgallery__main {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
}

.pgallery__main.is--dark {
  background: var(--color-dark-hover);
}

.pgallery img.is--upright {
  width: auto;
  height: 72%;
  transform: rotate(42deg);
}

.pgallery img.is--wide {
  width: 86%;
  height: auto;
}

.pgallery img.is--band {
  width: 80%;
  height: auto;
}

.pgallery img.is--cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pgallery img.is--product {
  width: 76%;
  height: auto;
  object-fit: contain;
}

.pgallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5625em;
}

.pgallery__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: var(--color-cream);
  border: 1px solid var(--color-line);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.pgallery__thumb[aria-pressed="true"],
.pgallery__thumb:hover {
  border-color: var(--color-dark);
}

.pgallery__thumb img.is--upright {
  height: 80%;
}

.pgallery__thumb img.is--wide,
.pgallery__thumb img.is--band {
  width: 90%;
}

.prod__info {
  display: flex;
  flex-direction: column;
  gap: 1.375em;
  max-width: 40em;
  padding-left: 5.625em;
}

.prod__band {
  display: flex;
  height: 5.9375em;
  border: 1px solid var(--color-line);
}

.prod__band-logo {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  margin: 0.8125em 1.625em;
}

.prod__band-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.prod__region {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 6.875em;
  padding: 0.1875em 0.5625em 0.5em;
  border-left: 1px solid var(--color-line);
}

.prod__region img {
  width: 3.25em;
  height: 1.8125em;
  object-fit: cover;
}

.prod__title {
  margin-bottom: 0.1667em;
  font-size: 3.75em;
  line-height: 0.9;
}

.prod__price {
  font-size: 1.5625em;
  line-height: 1.2;
  font-weight: 600;
}

.prod__specs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8333em;
  padding: 0.8333em 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.6667;
}

.prod__specs .intensity {
  text-transform: uppercase;
}

.prod__specs.is--text {
  justify-content: flex-start;
  gap: 2em;
  text-transform: uppercase;
}

.prod__desc {
  font-size: 1em;
  line-height: 1.25;
  font-weight: 500;
}

.pfield {
  margin: 0;
  padding: 0;
  border: 0;
}

.pfield legend {
  margin-bottom: 0.6667em;
  padding: 0;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}

.pfield__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375em;
}

.pfield__list {
  display: flex;
  flex-direction: column;
  gap: 0.375em;
}

.popt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  min-height: 3.3333em;
  padding: 0 1.1667em;
  background: transparent;
  border: 1px solid var(--color-rule);
  font: inherit;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-dark);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.popt.is--center {
  justify-content: center;
}

.popt:hover {
  border-color: var(--color-dark);
}

.popt[aria-pressed="true"] {
  border-color: var(--color-dark);
  box-shadow: inset 0 0 0 1px var(--color-dark);
}

.prod__buy {
  display: flex;
  align-items: stretch;
  gap: 0.5em;
}

.prod__add {
  flex: 1;
  min-height: 3.6667em;
  border: 0;
  font-size: 0.75em;
  text-transform: uppercase;
  cursor: pointer;
}

.prod__where {
  min-height: 3.6667em;
  margin-top: -1.1667em;
  text-transform: uppercase;
}

.prod__note {
  margin-top: -0.8333em;
  font-size: 0.75em;
  line-height: 1.25;
  font-weight: 500;
  color: var(--color-hover);
}

.pacc {
  border-top: 1px solid var(--color-line);
}

.pacc:last-child {
  border-bottom: 1px solid var(--color-line);
}

.pacc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.6667em;
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.pacc summary::-webkit-details-marker {
  display: none;
}

.pacc summary::after {
  content: "+";
}

.pacc[open] summary::after {
  content: "\2013";
}

.pacc p {
  margin: 0 0 1.1429em;
  font-size: 0.875em;
  line-height: 1.2857;
  font-weight: 500;
}

.pacc__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3333em 2em;
  margin: 0 0 1.3333em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.625;
  text-transform: uppercase;
}

.pacc__facts dt,
.pacc__facts dd {
  display: inline;
}

.pacc__facts dd {
  margin: 0;
  font-weight: 500;
  color: var(--color-hover);
}

.collection.is--related {
  padding: 10em var(--gutter);
}

.is--related .collection__head {
  margin-bottom: 2.125em;
}

@media screen and (max-width: 991px) {
  .prod {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2em;
  }

  .prod__info {
    max-width: none;
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .store-hero {
    margin-top: calc(2.3125em + 3px);
  }

  .store-hero__title {
    font-size: 2.75em;
    line-height: 0.9091;
  }

  .store__filters,
  .store__section {
    padding-left: 0.5625em;
    padding-right: 0.5625em;
  }


  .store-retailer__title {
    font-size: 2.5em;
    line-height: 0.95;
  }

  .pcrumbs {
    margin-top: 3.0833em;
    padding: 1em 0.75em 0;
  }

  .prod {
    padding: 0.75em 0.5625em 0;
  }

  .prod__title {
    margin-bottom: 0.2273em;
    font-size: 2.75em;
    line-height: 0.9091;
  }

  .collection.is--related {
    padding: 6.25em 0.5625em;
  }
}

/* ------------------------- Store + Product: mobile (Store – Mobile / Product Single – Mobile) ------------------------- */

@media screen and (max-width: 767px) {
  .store__filters {
    padding: 3em var(--gutter) 0;
  }

  .store__section {
    padding: 2.875em 0.5625em 0;
  }

  .store__section.is--acc {
    padding-top: 5em;
  }

  /* Cigars: horizontal snap scroller of full-size cards */
  .store__grid.is--scroll {
    display: flex;
    gap: 0.5625em;
    padding-bottom: 0.5em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .store__grid.is--scroll::-webkit-scrollbar {
    display: none;
  }

  .store__grid.is--scroll > .card.is--brand {
    flex: 0 0 19.75em;
    scroll-snap-align: start;
  }

  .store__grid .card.is--brand .card__title {
    margin-bottom: 0.4231em;
    font-size: 1.625em;
    line-height: 1;
  }

  .store__grid .card.is--brand .card__box {
    height: 29.9375em;
  }

  .store__grid .card.is--brand .card__head {
    height: 5.9375em;
  }

  .store__grid .card.is--brand .card__logo {
    margin: 0.875em 1.25em;
  }

  .store__grid .card.is--brand .card__brand {
    width: 6.125em;
    gap: 0.75em;
    padding: 0.4375em 0.4375em 0;
  }

  .store__grid .card.is--brand .card__brand-name {
    font-size: 1.5em;
    line-height: 0.9167;
  }

  .store__grid .card.is--brand .card__visual.is--upright img {
    height: 18.75em;
  }

  .store__grid .card.is--brand .card__visual.is--upright.is--short img {
    height: 16.25em;
  }

  .store__grid .card.is--brand .card__specs {
    padding: 0 0.7273em 0.9091em;
    font-size: 0.6875em;
  }

  .store__grid .card.is--brand .card__meta {
    font-size: 0.75em;
    line-height: 1.1667;
  }

  /* Accessories: two compact columns */
  .store__grid.is--acc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.375em;
    row-gap: 1.75em;
  }

  .store__grid.is--acc-grid .card__title {
    min-height: 2em;
    margin-bottom: 0.4444em;
    font-size: 1.125em;
    line-height: 1;
  }

  .store__grid.is--acc-grid .card__box.is--acc {
    height: 11.875em;
  }

  .store__grid.is--acc-grid .card__box.is--acc .card__product {
    max-width: 80%;
    max-height: 9.375em;
  }

  .store__grid.is--acc-grid .card__meta {
    font-size: 0.6875em;
    line-height: 1.2727;
  }

  .store__grid.is--acc-grid .btn-dark {
    min-width: 0;
    padding: 0 0.8333em;
  }

  [data-view="index"] .store__section .store__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .store__empty {
    margin: 3.75em var(--gutter) 0;
  }

  .store-retailer {
    padding: 7.5em var(--gutter) 10em;
  }
}

.footer__address a.footer__contact {
  color: var(--color-dark);
}