/* The homepage spotlights the established businesses in the JLaw family. */
.home-hero--photographic {
  display: block;
  max-width: none;
  padding: calc(var(--nav-h) + 48px) 0 0;
  background: #f0eae1;
  color: #29231f;
}
.hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 40px 38px;
  display: grid;
  grid-template-columns: 1.03fr 1fr;
  gap: 48px;
  align-items: center;
}
.home-hero--photographic .home-hero-copy { padding-bottom: 8px; }
.home-hero--photographic .home-origin {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #78372c;
  margin-bottom: 28px;
  font-size: 12px;
  letter-spacing: .045em;
}
.home-hero--photographic .home-origin::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.home-hero--photographic h1 {
  font-size: clamp(48px, 5.7vw, 80px);
  line-height: 1.04;
  letter-spacing: -.05em;
}
.home-hero--photographic h1 em { font-weight: 400; color: #8b392c; }
.home-hero--photographic .home-lede { max-width: 40ch; margin-top: 26px; color: #61564c; font-size: 17px; line-height: 1.75; }
.home-hero--photographic .home-actions { margin-top: 30px; gap: 12px 22px; }
.home-hero--photographic .btn { background: #87392c; color: #fff; border-color: #87392c; padding: 17px 23px; }
.home-hero--photographic .btn:hover { background: #672b21; }
.home-hero--photographic .text-link { font-size: 13px; gap: 10px; }
.home-hero--photographic svg { width: 21px; height: 21px; flex-shrink: 0; }
.hero-family-note { display: flex; align-items: center; gap: 30px; padding-top: 28px; margin-top: 34px; border-top: 1px solid #d7cbbd; }
.hero-business-count { display: flex; align-items: center; gap: 14px; }
.hero-business-count strong { font: 400 60px/.95 var(--serif); letter-spacing: -.05em; }
.hero-business-count strong span { font-size: .58em; vertical-align: top; padding-left: 2px; }
.hero-business-count > span { font-size: 13px; line-height: 1.5; }
.hero-roots { font-size: 11px; line-height: 1.8; color: #6b5f53; border-left: 1px solid #d7cbbd; padding-left: 26px; }
.hero-photo-composition { position: relative; min-width: 0; height: clamp(500px, 44vw, 600px); }
.hero-feature { position: absolute; display: block; border-radius: 5px; overflow: hidden; color: #fff; background: #fff; }
.hero-feature > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-feature > span { position: absolute; inset: auto 0 0; padding: 35px 16px 15px; background: linear-gradient(transparent, rgba(20,15,10,.82)); font-size: 12px; line-height: 1.4; }
.hero-feature--lot88 { inset: 0 26% 34% 0; }
.hero-feature--lot88 > img { object-position: 46% center; }
.hero-feature--lot88 > span { inset: 0 0 auto; padding: 21px 22px 40px; font-size: 14px; background: linear-gradient(rgba(20,15,10,.65), transparent); }
.hero-feature--overtime { top: 38px; right: -4px; width: 42%; height: 45%; border: 7px solid #f0eae1; }
.hero-feature--overtime > img { object-position: 32% center; }
.hero-feature--overtime > span { padding: 35px 10px 12px; font-size: 11px; }
.hero-feature--montanas { bottom: 0; left: 24px; width: 57%; height: 41%; border: 7px solid #f0eae1; box-shadow: 0 12px 28px rgba(58,39,20,.12); }
.hero-feature--montanas > img { object-position: center center; }
.hero-feature--kelseys { bottom: 14px; right: -4px; width: 36%; height: 32%; border: 7px solid #f0eae1; box-shadow: 0 12px 28px rgba(58,39,20,.08); }
.hero-feature--kelseys > img { object-position: center; }
.hero-photo-composition a { transition: filter .2s ease; }
.hero-photo-composition a:hover { filter: brightness(1.04); }
.hero-bottom-line { max-width: calc(var(--content-width) - 80px); margin: 0 auto; padding: 18px 0; border-top: 1px solid #d7cbbd; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #716457; font-size: 11px; }
.hero-bottom-line > a { min-height: 32px; display: inline-flex; align-items: center; gap: 20px; color: #483c32; text-decoration: none; }
.home-hero--photographic :focus-visible { outline: 3px solid #87392c; outline-offset: 4px; }
@media (max-width: 1024px) {
  .hero-inner { gap: 30px; }
  .home-hero--photographic h1 { font-size: 57px; }
  .hero-photo-composition { height: 530px; }
  .hero-family-note { gap: 20px; }
  .hero-roots { padding-left: 18px; }
  .hero-business-count strong { font-size: 52px; }
}
@media (max-width: 900px) {
  .home-hero--photographic { padding-top: calc(var(--nav-h) + 40px); }
  .hero-inner { padding-inline: 24px; grid-template-columns: 1fr 1fr; gap: 24px; }
  .home-hero--photographic h1 { font-size: clamp(40px, 6.4vw, 56px); }
  .home-hero--photographic .home-lede { font-size: 15px; margin-top: 20px; }
  .home-hero--photographic .home-origin { margin-bottom: 20px; font-size: 10px; gap: 8px; }
  .hero-family-note { flex-wrap: wrap; gap: 18px; margin-top: 24px; padding-top: 22px; }
  .hero-roots { border: 0; padding-left: 0; }
  .hero-feature--overtime { right: -5px; border-width: 5px; }
  .hero-feature--montanas { left: 8px; border-width: 5px; }
  .hero-feature--kelseys { right: -5px; width: 37%; border-width: 5px; }
  .hero-feature > span { font-size: 10px; padding-inline: 10px; }
  .hero-feature--lot88 > span { font-size: 12px; padding: 16px 16px 30px; }
  .hero-bottom-line { margin-inline: 24px; }
}
@media (max-width: 640px) {
  .home-hero--photographic { padding-top: calc(var(--nav-h) + 30px); }
  .hero-inner { padding: 0 20px 24px; grid-template-columns: 1fr; gap: 28px; }
  .home-hero--photographic h1 { font-size: clamp(43px, 11.5vw, 68px); }
  .home-hero--photographic .home-origin { font-size: 11px; }
  .home-hero--photographic .home-lede { max-width: 36ch; font-size: 16px; }
  .home-hero--photographic .home-actions { margin-top: 23px; gap: 14px; }
  .home-hero--photographic .btn { padding: 14px 18px; }
  .hero-family-note { flex-wrap: nowrap; gap: 20px; margin-top: 26px; padding-top: 22px; }
  .hero-business-count { gap: 12px; }
  .hero-business-count strong { font-size: 50px; }
  .hero-business-count > span { font-size: 11px; }
  .hero-roots { font-size: 10px; }
  .hero-photo-composition { height: clamp(370px, 105vw, 520px); }
  .hero-feature--overtime { top: 24px; }
  .hero-feature--montanas { left: 10px; }
  .hero-feature--kelseys { bottom: 8px; }
  .hero-bottom-line { margin-inline: 20px; padding: 13px 0; }
  .hero-bottom-line > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-photo-composition a { transition: none; } }

.family-eyebrow { font: 500 12px/1.6 var(--sans); letter-spacing: .04em; }
.brand-showcase svg { width: 22px; height: 22px; flex-shrink: 0; }
.brand-showcase {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 54px 40px 64px;
  scroll-margin-top: var(--scroll-offset);
}
.brand-showcase-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}
.brand-showcase .family-eyebrow { color: var(--accent); margin-bottom: 12px; }
.brand-showcase-heading h2 {
  font: 400 clamp(30px, 3.3vw, 44px)/1.15 var(--serif);
  letter-spacing: -.03em;
  max-width: 24ch;
}
.brand-showcase-heading p:not(.family-eyebrow) {
  max-width: 60ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 14px;
}
.brand-showcase-heading > a { flex-shrink: 0; }
.brand-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 3.15);
  gap: 20px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
  padding: 4px 3px 16px;
  margin: -4px -3px 0;
}
.brand-slide { min-width: 0; }
.brand-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color .2s;
  color: inherit;
  text-decoration: none;
}
.brand-card-media {
  position: relative;
  aspect-ratio: 1.4;
  overflow: hidden;
  background: #fff;
}
.brand-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.brand-card-media--logo { padding: 34px; }
.brand-card-media--logo img { object-fit: contain; }
.brand-card-media .poke-bar-photo { object-fit: contain; object-position: center center; }

.brand-card-copy { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.brand-card-copy > p { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.brand-card-copy h3 { font: 400 24px/1.2 var(--serif); letter-spacing: -.02em; margin-top: 10px; margin-bottom: 24px; }
.brand-card-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; font-size: 12px; font-weight: 500; }
.brand-card:hover { border-color: var(--accent); }
.brand-card:hover .brand-card-media:not(.brand-card-media--logo) img { transform: scale(1.035); }
.brand-card:hover .brand-card-media img.poke-bar-photo { transform: none; }
.brand-card:hover .brand-card-action { color: var(--accent); }
.brand-carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; }
.brand-browse-hint { font-size: 13px; font-weight: 500; }
.brand-browse-hint span { color: var(--muted); font-weight: 400; }
.brand-controls { display: flex; align-items: center; gap: 10px; }
.brand-controls button { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ink); cursor: pointer; font: 500 12px var(--sans); }
.brand-arrow { width: 44px; height: 44px; border: 1px solid var(--hairline); border-radius: 50%; }
.brand-arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.brand-arrow:disabled { opacity: .3; cursor: default; background: transparent; color: var(--ink); }
.brand-previous svg { transform: rotate(180deg); }
.brand-play { gap: 7px; min-height: 44px; padding: 0 8px; border: none; }
.brand-play [data-play-icon] { font-size: 16px; width: 14px; }
.brand-position { color: var(--muted); font-size: 12px; min-width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
.brand-showcase :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1024px) {
  .brand-track { grid-auto-columns: calc((100% - 40px) / 2.15); }
  .brand-showcase-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .brand-browse-hint span { display: none; }
}
@media (max-width: 900px) {
  .brand-showcase { padding-inline: 24px; }
}
@media (max-width: 640px) {
  .brand-showcase { padding: 26px 20px 44px; }
  .brand-showcase-heading { margin-bottom: 22px; }
  .brand-showcase-heading h2 { max-width: 17ch; }
  .brand-track { grid-auto-columns: 84%; gap: 14px; }
  .brand-card-copy { padding: 20px; }
  .brand-carousel-footer { flex-wrap: wrap; gap: 8px; padding-top: 8px; }
  .brand-controls { flex: 1; justify-content: flex-end; gap: 6px; }
  .brand-browse-hint { flex-basis: 100%; }
  .brand-play { margin-right: auto; padding-left: 0; }
  .brand-position { min-width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-showcase *, .brand-showcase *::before { transition: none !important; }
}