.brands-page { background: var(--white); }
.brands-page .site-header { color: var(--ink); }
.brands-main { overflow: hidden; }

.brands-hero { position: relative; display: flex; min-height: 600px; align-items: end; padding: calc(var(--header-height) + 80px) 0 90px; overflow: hidden; background: var(--greige); }
.brands-hero::before { content: "SELL"; position: absolute; right: -.035em; bottom: -.2em; color: rgba(41,41,35,.055); font-size: clamp(10rem, 25vw, 25rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; white-space: nowrap; }
.brands-hero::after { content: ""; position: absolute; right: 0; inset-block: 0; width: 28%; background: var(--navy); }
.brands-hero-inner { position: relative; z-index: 1; width: 100%; }
.brands-breadcrumb { margin: 0 0 58px; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.brands-hero h1 { max-width: 70%; margin: 0; font-size: clamp(3rem, 6.4vw, 6.6rem); font-weight: 600; line-height: .98; letter-spacing: -.065em; }
.brands-hero h1 span { display: block; margin-top: 28px; font-size: .82rem; font-weight: 500; letter-spacing: .12em; }

.commerce-intro { padding: clamp(100px, 13vw, 180px) 0; }
.commerce-intro-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(60px, 10vw, 150px); }
.commerce-intro h2 { margin: 0 0 44px; font-size: clamp(2.5rem, 5.3vw, 5.5rem); font-weight: 600; line-height: 1.24; letter-spacing: -.055em; }
.commerce-intro-grid > div > p { max-width: 720px; margin: 0 0 20px; color: var(--muted); }
.commerce-intro-grid .commerce-lead { color: var(--ink); font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 500; }

.commerce-operations, .retail-products { padding: clamp(100px, 12vw, 170px) 0; background: var(--mist); }
.commerce-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 10vw, 140px); align-items: start; margin-bottom: 70px; }
.commerce-heading h2 { margin: 0; font-size: clamp(2.3rem, 4.4vw, 4.2rem); font-weight: 500; line-height: 1.35; letter-spacing: -.045em; }
.commerce-heading > p:last-child { max-width: 620px; margin: 50px 0 0; color: var(--muted); }
.operation-list { border-top: 1px solid var(--line); }
.operation-row { display: grid; grid-template-columns: 70px 170px 1fr; gap: clamp(24px, 5vw, 80px); padding: clamp(38px, 5vw, 62px) 0; border-bottom: 1px solid var(--line); }
.operation-row > span, .operation-row > strong { color: var(--blue); font-size: .68rem; line-height: 1.6; letter-spacing: .13em; }
.operation-row h3 { margin: 0 0 17px; font-size: clamp(1.6rem, 2.6vw, 2.55rem); font-weight: 500; line-height: 1.4; letter-spacing: -.035em; }
.operation-row div p { max-width: 700px; margin: 0; color: var(--muted); }

.retail-statement { position: relative; padding: clamp(115px, 14vw, 200px) 0; overflow: hidden; color: var(--greige); background: var(--navy); }
.retail-statement::after { content: "SELL"; position: absolute; right: -.03em; bottom: -.24em; color: rgba(214,210,196,.035); font-size: clamp(10rem, 25vw, 25rem); font-weight: 800; line-height: 1; letter-spacing: -.08em; }
.retail-statement .container { position: relative; z-index: 1; }
.retail-statement .container > p:first-child { margin: 0 0 38px; color: rgba(214,210,196,.55); font-size: .68rem; font-weight: 700; letter-spacing: .17em; }
.retail-statement h2 { margin: 0; color: var(--white); font-size: clamp(3rem, 7vw, 7rem); font-weight: 600; line-height: 1.15; letter-spacing: -.06em; }
.statement-copy { max-width: 630px; margin: 50px 0 0 auto; color: rgba(214,210,196,.66); font-size: clamp(1rem, 1.35vw, 1.18rem); }

.retail-products { background: var(--white); }
.retail-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 42px); }
.retail-product-card { display: grid; grid-template-columns: 1fr; background: var(--mist); transition: transform .3s, box-shadow .3s; }
.retail-product-card:hover { transform: translateY(-7px); box-shadow: 0 28px 70px rgba(41,41,35,.1); }
.retail-product-image { position: relative; aspect-ratio: 1.32; overflow: hidden; background: var(--greige); }
.retail-product-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--image-wash); mix-blend-mode: multiply; transition: opacity .45s ease; }
.retail-product-image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--image-tone); transition: transform .55s ease, filter .45s ease; }
.retail-product-image-logo { background: linear-gradient(145deg,#eeeae0,var(--greige)); }
.retail-product-image-logo img { object-fit: contain; padding: clamp(44px,7vw,90px); filter: none; }
.retail-product-card:hover img { transform: scale(1.025); }
.retail-product-card:hover .retail-product-image img { filter: var(--image-tone-hover); }
.retail-product-card:hover .retail-product-image::after { opacity: 0; }
.retail-product-info { padding: clamp(26px, 4vw, 46px); }
.retail-product-info > span { color: var(--blue); font-size: .66rem; font-weight: 700; letter-spacing: .16em; }
.retail-product-info h3 { margin: 24px 0 8px; font-size: clamp(1.65rem, 2.5vw, 2.5rem); font-weight: 600; letter-spacing: -.035em; }
.retail-product-info p { margin: 0 0 34px; color: var(--muted); }
.retail-product-info strong { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); font-size: .78rem; letter-spacing: .04em; }
.retail-product-info i { font-style: normal; transition: transform .25s; }
.retail-product-card:hover i { transform: translate(4px, -4px); }

.sales-cycle { padding: clamp(110px, 13vw, 180px) 0; color: var(--greige); background: var(--navy); }
.cycle-heading { display: grid; grid-template-columns: .6fr 1.4fr; gap: clamp(60px, 10vw, 150px); margin-bottom: clamp(70px, 9vw, 115px); }
.cycle-heading h2 { margin: 0; color: var(--white); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 500; line-height: 1.3; letter-spacing: -.05em; }
.cycle-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid rgba(214,210,196,.22); border-left: 1px solid rgba(214,210,196,.22); list-style: none; }
.cycle-list li { min-height: 250px; padding: 28px 24px; border-right: 1px solid rgba(214,210,196,.22); border-bottom: 1px solid rgba(214,210,196,.22); }
.cycle-list span { display: block; margin-bottom: 65px; color: rgba(214,210,196,.44); font-size: .68rem; letter-spacing: .12em; }
.cycle-list strong { color: var(--white); letter-spacing: .1em; }
.cycle-list p { margin: 12px 0 0; color: rgba(214,210,196,.62); font-size: .86rem; }

@media (max-width: 900px) {
  .brands-hero { min-height: 500px; }
  .brands-hero::after { width: 14px; }
  .brands-hero h1 { max-width: 100%; }
  .commerce-intro-grid, .commerce-heading, .cycle-heading { grid-template-columns: 1fr; gap: 28px; }
  .commerce-heading > p:last-child { margin-top: 0; }
  .operation-row { grid-template-columns: 54px 130px 1fr; gap: 24px; }
  .cycle-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .brands-hero h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .operation-row { grid-template-columns: 42px 1fr; }
  .operation-row > strong, .operation-row > div { grid-column: 2; }
  .retail-product-grid, .cycle-list { grid-template-columns: 1fr; }
  .retail-product-image { aspect-ratio: 1.1; }
  .cycle-list li { min-height: 0; }
  .cycle-list span { margin-bottom: 38px; }
}

@media (hover: none) {
  .retail-product-image img { filter: var(--image-tone); }
  .retail-product-image-logo img { filter: none; }
  .retail-product-image::after { opacity: .3; }
}
