/* A light product stage keeps the black shelf silhouette crisp and visible. */
.hero-visual {
  background: #e7e5df;
}

.product-stage {
  filter: drop-shadow(0 28px 22px rgba(0, 0, 0, 0.28));
  transform: none;
}

.dimension-tag {
  border: 1px solid #d0ccc4;
}

/* Let a real-use scene carry the first impression instead of a bare product cutout. */
.hero-visual {
  align-items: stretch;
  background: #e7e5df;
}

.product-stage.lifestyle-stage {
  width: 100%;
  min-height: 100%;
  filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e7e5df;
}

.lifestyle-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.hero-visual .dimension-tag {
  right: auto;
  bottom: auto;
  top: 1rem;
  left: 1rem;
}

.visualization-note {
  position: absolute;
  left: 1rem;
  bottom: 0.85rem;
  max-width: 22rem;
  margin: 0;
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.88);
  color: #555;
  font-size: 0.68rem;
  line-height: 1.35;
}

/* Make the opening promise and primary product advantage impossible to miss. */
.hero {
  min-height: 590px;
}

.hero-copy {
  padding: clamp(3.75rem, 6vw, 5.5rem) 5vw clamp(3.25rem, 5vw, 4.75rem) 7vw;
}

.hero .hero-claim {
  display: inline-block;
  max-width: 39rem;
  margin: 0 0 0.9rem;
  padding: 0.8rem 1rem 0.75rem;
  border: 0;
  background: #e32320;
  color: #fff;
  box-shadow: 4px 4px 0 #111;
  font-size: clamp(0.9rem, 1.35vw, 1.15rem);
  line-height: 1.25;
  letter-spacing: 0.09em;
}

.hero-claim-proof {
  max-width: 36rem;
  margin: 0 0 1.1rem;
  color: #555;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.hero .hero-hook {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding-bottom: 0.45rem;
  border-bottom: 4px solid #111;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.15;
  letter-spacing: 0.12em;
}

.hero .lede {
  margin: 1.5rem 0;
}

.hero .mini-proof {
  margin-top: 2rem;
}

.hero-advantage {
  display: block;
  margin-top: 0.75rem;
  color: #e32320;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.015em;
}

@media (max-width: 900px) {
  .hero-copy {
    padding: 3.75rem 7vw 3.5rem;
  }
}

@media (max-width: 560px) {
  .hero-copy {
    padding: 3rem 6vw;
  }

  .hero .hero-claim {
    box-shadow: 3px 3px 0 #111;
    font-size: 0.82rem;
    letter-spacing: 0.075em;
  }

  .hero .mini-proof {
    margin-top: 1.75rem;
  }
}

/* Give every word room to breathe, especially in the condensed display face. */
body {
  letter-spacing: 0.01em;
}

.brand {
  letter-spacing: 0.015em;
}

.site-header .brand {
  align-items: flex-start;
  flex-direction: column;
}

.brand-name {
  display: flex;
  align-items: flex-end;
}

.brand-tagline {
  margin-top: 0.35rem;
  padding-left: 0.1rem;
  color: #555;
  font: 800 0.52rem/1 Inter, Arial, sans-serif;
  letter-spacing: 0.16em;
}

.use-gallery-showcase {
  padding: clamp(4.5rem, 8vw, 7.5rem) 5vw;
  background: #f5f3ee;
}

.use-gallery-heading {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: end;
  margin: 0 auto 2.5rem;
  max-width: 1440px;
}

.use-gallery-heading .eyebrow { grid-column: 1 / -1; margin-bottom: -2rem; }
.use-gallery-heading h2 { margin: 0; font: 900 clamp(3.3rem, 6.5vw, 6.6rem)/0.86 Barlow Condensed, sans-serif; letter-spacing: 0.01em; }
.use-gallery-heading > p:last-child { max-width: 34rem; margin: 0; color: #555; font-size: 1.05rem; line-height: 1.75; }

.use-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 17rem;
  gap: 0.8rem;
  max-width: 1440px;
  margin: 0 auto;
}

.use-gallery-mosaic figure { position: relative; margin: 0; overflow: hidden; background: #ddd; }
.use-gallery-mosaic .gallery-tall { grid-row: span 2; }
.use-gallery-mosaic .gallery-wide { grid-column: span 2; }
.use-gallery-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.use-gallery-mosaic figure:hover img { transform: scale(1.025); }
.use-gallery-mosaic figcaption { position: absolute; inset: auto 0 0; padding: 2.5rem 1rem 1rem; color: white; background: linear-gradient(transparent, rgba(0,0,0,.82)); font: 800 .78rem/1.3 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.use-gallery-mosaic figure { cursor: zoom-in; }
.use-gallery-mosaic figure:focus-visible { outline: 4px solid #e32320; outline-offset: 3px; }
.use-gallery-mosaic .gallery-show-all img { object-fit: contain; background: #171717; }
.gallery-office img { object-position: center center; }

.gallery-lightbox {
  width: min(96vw, 1500px);
  height: 94vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  color: #fff;
  background: #111;
  box-shadow: 0 2rem 6rem rgba(0,0,0,.55);
}
.gallery-lightbox::backdrop { background: rgba(0,0,0,.88); backdrop-filter: blur(4px); }
.gallery-lightbox[open] { display: grid; grid-template: auto 1fr / auto minmax(0, 1fr) auto; }
.gallery-lightbox-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding: .65rem .8rem .65rem 1.2rem; background: #171717; }
.gallery-lightbox-caption { margin: 0; font: 800 clamp(.8rem, 1.6vw, 1rem)/1.3 Inter, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.gallery-lightbox-tools { display: flex; gap: .45rem; flex: 0 0 auto; }
.gallery-lightbox-tools button,
.gallery-lightbox-prev,
.gallery-lightbox-next { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.32); color: #fff; background: rgba(255,255,255,.1); cursor: pointer; }
.gallery-lightbox-tools button { min-width: 2.75rem; height: 2.75rem; padding: 0 .65rem; border-radius: .35rem; font: 800 1.25rem/1 Inter, Arial, sans-serif; }
.gallery-lightbox-tools [data-gallery-zoom-reset] { min-width: 4.2rem; font-size: .78rem; }
.gallery-lightbox-tools button:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover { background: #e32320; border-color: #e32320; }
.gallery-lightbox-stage { min-width: 0; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 1rem; }
.gallery-lightbox-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 6rem); object-fit: contain; }
.gallery-lightbox-prev,
.gallery-lightbox-next { align-self: center; width: 3rem; height: 5rem; border-radius: .35rem; margin: .5rem; font: 400 3rem/1 Arial, sans-serif; }

@media (max-width: 900px) {
  .use-gallery-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .use-gallery-heading .eyebrow { margin-bottom: 0; }
  .use-gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 15rem; }
}

@media (max-width: 560px) {
  .brand-tagline { font-size: .43rem; letter-spacing: .12em; }
  .use-gallery-showcase { padding-inline: 1rem; }
  .use-gallery-mosaic { grid-template-columns: 1fr; grid-auto-rows: 18rem; }
  .use-gallery-mosaic .gallery-tall { grid-row: span 1; }
  .use-gallery-mosaic .gallery-wide { grid-column: span 1; }
  .gallery-lightbox { width: 100vw; height: 100dvh; }
  .gallery-lightbox-bar { align-items: flex-start; padding-left: .8rem; }
  .gallery-lightbox-caption { padding-top: .75rem; }
  .gallery-lightbox-stage { grid-column: 1 / -1; grid-row: 2; padding: .5rem; }
  .gallery-lightbox-stage img { max-height: calc(100dvh - 5.5rem); }
  .gallery-lightbox-prev,
  .gallery-lightbox-next { position: fixed; z-index: 2; top: 50%; transform: translateY(-50%); width: 2.7rem; height: 4.5rem; margin: 0; background: rgba(0,0,0,.62); }
  .gallery-lightbox-prev { left: .25rem; }
  .gallery-lightbox-next { right: .25rem; }
}

.hero h1,
.section-intro h2,
.uses h2,
.why h2,
.buy h2,
.wholesale h2,
.story blockquote {
  letter-spacing: 0.02em;
}

.steps h3,
.proof-bar b,
.use-grid figcaption b,
.folded-card p,
.price {
  letter-spacing: 0.025em;
}

.steps article {
  padding-top: 1.25rem;
}

.step-image {
  height: 15rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
  background: #ece9e2;
}

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

.steps article:nth-child(1) .step-image img { object-position: center; }
.steps article:nth-child(2) .step-image img { object-position: center; }
.steps article:nth-child(3) .step-image img { object-position: center 44%; }

.uses-note {
  margin: 1rem 0 0;
  color: #898989;
  font-size: 0.72rem;
  line-height: 1.5;
}

.editions{padding:7rem 8vw;background:#f5f3ee}.editions-heading{max-width:62rem;margin-bottom:3.5rem}.editions-heading h2,.relaunch h2{margin:0 0 1.5rem;font:900 clamp(3.4rem,6vw,5.5rem)/.92 "Barlow Condensed",sans-serif;letter-spacing:.02em}.editions-heading>p:last-child,.relaunch-intro>p:last-child{max-width:46rem;color:#555;font-size:1rem;line-height:1.75}.edition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.edition-card{padding:1.5rem;background:#fff;border-top:.4rem solid #111}.edition-card.original{border-color:#e32320}.edition-image{height:22rem;display:flex;align-items:center;justify-content:center;background:#ebe9e3;overflow:hidden}.edition-image img{width:100%;height:100%;object-fit:contain}.edition-kicker,.bundle-label{margin:1.7rem 0 .55rem;color:#e32320;font-weight:800;font-size:.78rem;letter-spacing:.13em}.edition-card h3,.original-phone h3,.bundle-grid h3{margin:0;font:900 2.8rem/.95 "Barlow Condensed",sans-serif;letter-spacing:.025em}.edition-card ul{list-style:none;padding:0;margin:1.5rem 0;line-height:1.9;color:#555}.edition-card li::before{content:"✓";margin-right:.65rem;color:#e32320;font-weight:900}.stock-note{padding-top:1rem;border-top:1px solid #d8d4cc;font-size:.82rem}.original-phone{margin-top:1.25rem;display:grid;grid-template-columns:1.05fr .95fr;background:#111;color:#fff}.original-phone img{width:100%;height:100%;min-height:25rem;object-fit:cover}.original-phone>div{padding:4rem;align-self:center}.original-phone>div>p:last-child{color:#bbb;line-height:1.7}.relaunch{padding:7rem 8vw;background:#fff}.relaunch-intro{margin-bottom:3rem}.bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.bundle-grid article{padding:2.4rem;border:2px solid #111}.bundle-grid article.featured{background:#e32320;color:#fff;border-color:#e32320;box-shadow:.5rem .5rem 0 #111}.featured .bundle-label{color:#fff}.bundle-price{margin:1.5rem 0 .75rem;font:900 3.5rem "Barlow Condensed",sans-serif}.bundle-grid article>p:not(.bundle-label):not(.bundle-price){max-width:30rem;line-height:1.65}.bundle-grid article>span{display:inline-block;margin-top:1rem;font-size:.76rem;font-weight:800;letter-spacing:.12em}.bundle-footnote{margin-top:1.5rem;color:#777;font-size:.78rem}

.relaunch-intro .founders-line {
  margin-top: 1.25rem;
  color: #111;
  font-size: 1.15rem;
}

.launch-status {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.25rem;
  align-items: center;
  max-width: 48rem;
  margin-top: 1.5rem;
  padding: 1.15rem 1.25rem;
  border: 2px solid #111;
  border-left: 0.5rem solid #e32320;
  background: #f5f3ee;
}

.launch-status b { font-size: 0.85rem; letter-spacing: 0.1em; }
.launch-status span { color: #555; font-size: 0.95rem; line-height: 1.55; }

.batch-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 2.5rem;
  border: 2px solid #111;
}

.batch-facts div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid #111;
}

.batch-facts div:last-child { border-right: 0; }
.batch-facts b { color: #e32320; font: 900 2.2rem "Barlow Condensed", sans-serif; letter-spacing: 0.03em; }
.batch-facts span { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; }

.bundle-grid .free-shipping {
  display: inline-block;
  margin: 0.75rem 0 0.25rem;
  padding: 0.55rem 0.7rem;
  background: #111;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.bundle-grid .free-shipping.light-badge {
  background: #fff;
  color: #111;
}

@media(max-width:760px){.editions,.relaunch{padding:5rem 6vw}.edition-grid,.bundle-grid,.original-phone{grid-template-columns:1fr}.edition-image{height:17rem}.original-phone>div{padding:2.5rem 1.5rem}.batch-facts{grid-template-columns:1fr}.batch-facts div{border-right:0;border-bottom:1px solid #111}.batch-facts div:last-child{border-bottom:0}.step-image{height:13rem}.visualization-note{font-size:.62rem;max-width:16rem}.launch-status{grid-template-columns:1fr;gap:.5rem}}

.color-choice{max-width:28rem;margin:0 0 1.5rem;padding:0;border:0}.color-choice legend{margin-bottom:.75rem;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.color-choice label{position:relative;display:grid;grid-template-columns:1.6rem 1fr;grid-template-rows:auto auto;column-gap:.65rem;align-items:center;margin:.5rem 0;padding:.75rem;border:2px solid #c9c5bd;background:#fff;cursor:pointer}.color-choice label.selected{border-color:#e32320;box-shadow:3px 3px 0 #111}.color-choice input{position:absolute;opacity:0}.swatch{grid-row:1/3;width:1.45rem;height:1.45rem;border:1px solid #999;border-radius:50%}.swatch.white{background:#fff}.swatch.gray{background:#909090}.swatch.black{background:#111}.color-choice b{font-size:.9rem}.color-choice small{color:#777;font-size:.72rem}