/* ===== ABOUT page enhancements ===== */
.about-hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.about-title{ margin:0 0 8px; font-size:36px; }
.eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:#777; margin:0 0 6px; }

.about-hero__ctas{ display:flex; gap:12px; align-items:center; margin-top:12px; }
.about-hero__ctas .btn{ padding:12px 18px; }
.about-hero__ctas .link{ border-bottom:1px solid currentColor; padding-bottom:2px; }

/* Stats pills */
.about-stats{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
.stat{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  min-width:140px;
}
.stat-kicker{ display:block; font-weight:700; }
.stat-label{ display:block; color:#666; font-size:12px; }

/* Image cards (owner + storefront) */
.img-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.photo-fill{ width:100%; height:100%; object-fit:cover; display:block; }
.img-caption{ padding:10px 12px; font-size:13px; color:#555; border-top:1px solid var(--border); background:#fafafa; }

.portrait{ aspect-ratio: 4 / 5; }   /* tall portrait space */
.storefront{ aspect-ratio: 16 / 9; }/* wide storefront space */
/* === Image Feature Cards === */
.features-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width: 980px){
  .features-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .features-grid{ grid-template-columns:1fr; }
}

.feature-card{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:18px; min-height:240px; background:#000; color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}

/* Image layer */
.feature-card .feature-media{
  position:absolute; inset:-2%; z-index:0;      /* tiny overscan prevents edges on scale */
  background-image:var(--img);
  background-size:cover; background-position:center;
  filter:saturate(1) contrast(1) brightness(.9);
  transform:scale(1);
  transition: transform .8s ease, filter .5s ease;
}

/* Gradient overlay to keep text readable */
.feature-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.65) 100%);
  transition: opacity .35s ease;
}

/* Content */
.feature-card .feature-body{
  position:relative; z-index:2; padding:18px;
  display:grid; gap:8px; align-content:end; height:100%;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.feature-card h3{
  margin:0; font-size:20px; letter-spacing:.01em;
  display:inline-block; border-bottom:2px solid rgba(255,255,255,.85);
  padding-bottom:2px; width:max-content; max-width:100%;
}
.feature-card p{
  margin:6px 0 0; color:#eaeaea;
}

/* Hover/Lift effect */
.feature-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  border-color:rgba(255,255,255,.16);
}
.feature-card:hover .feature-media{
  transform:scale(1.06);                 /* subtle zoom */
  filter:saturate(1.05) contrast(1.05) brightness(.95);
}
.feature-card:hover::after{
  opacity:.9;                              /* slightly richer overlay */
}

/* Reduced motion: keep it calm */
@media (prefers-reduced-motion: reduce){
  .feature-card,
  .feature-card .feature-media,
  .feature-card::after{
    transition:none;
  }
}

/* Storefront split */
.about-storefront{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:22px; align-items:center;
}
.storefront-copy .kv-compact{ grid-template-columns: 120px 1fr; }
.storefront-copy .kv-compact > div{ padding:6px 0; border-bottom:1px dashed var(--border); }

/* Timeline */
.timeline{ display:grid; gap:14px; }
.timeline-head h3{ margin:0; }
.timeline-list{ list-style: none; margin: 8px 0 0; padding:0; display:grid; gap:12px; }
.timeline-list li{
  position:relative; padding-left:28px;
  border:1px solid var(--border); border-radius:12px; padding:12px 14px 12px 42px; background:#fff;
}
.timeline-list li::before{
  content:""; position:absolute; left:14px; top:18px;
  width:10px; height:10px; border-radius:999px; background:#000;
}
.timeline-list h4{ margin:0 0 4px; font-size:16px; }

/* Small gallery refinement */
.about-gallery{ grid-template-columns: repeat(3, 1fr); }
.about-gallery img{ border-radius:14px; border:1px solid var(--border); aspect-ratio:1/1; object-fit:cover; }

/* Checked list */
.list-check{ list-style:none; padding:0; margin:12px 0; display:grid; gap:6px; }
.list-check li{
  position:relative; padding-left:26px;
}
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#000; font-weight:700;
}

/* Responsive */
@media (max-width: 980px){
  .about-hero__grid{ grid-template-columns: 1fr; }
  .about-title{ font-size:32px; }
  .features{ grid-template-columns: 1fr; }
  .about-storefront{ grid-template-columns: 1fr; }
  .about-gallery{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .about-title{ font-size:28px; }
  .stat{ min-width:120px; }
  .about-gallery{ grid-template-columns: 1fr; }
  .portrait{ aspect-ratio: 3 / 4; }
  .storefront{ aspect-ratio: 4 / 3; }
}


/* === Unified black button === */
.btn{
  background:#000 !important;
  color:#fff !important;
  border:1px solid #000;
  border-radius:14px;
  padding:12px 18px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06) inset;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.btn:hover{
  background:#111;
  border-color:#111;
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}

.btn:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

/* Optional: bolder “primary” size for key CTAs */
.btn.btn-lg{ padding:14px 22px; border-radius:16px; font-size:1.02rem; }

/* Secondary link next to the button */
.link{
  color:#000;
  border-bottom:2px solid currentColor;
  padding-bottom:2px;
  font-weight:600;
}
.link:hover{ opacity:.85; }


/* ===== ABOUT — mobile centering & spacing ===== */
@media (max-width: 768px){
  /* Stack the grid and center its contents */
  .about-hero__grid{
    grid-template-columns: 1fr;
    gap: 22px;
    justify-items: center;     /* centers blocks like the text + image cards */
  }
  .about-hero__grid > *{ width: 100%; }

  /* Center headings and small eyebrow line */
  .about-title{
    text-align: center;
    margin-inline: auto;
    line-height: 1.15;
  }
  .eyebrow{ text-align: center; }

  /* Center CTAs and allow wrapping */
  .about-hero__ctas{
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Stats: center the row and keep nice wrapping */
  .about-stats{
    justify-content: center;
    text-align: center;
  }

  /* Image cards: constrain width and center */
  .img-card{
    max-width: 520px;
    margin-inline: auto;
  }

  /* Storefront split section becomes centered text on mobile */
  .about-storefront{
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
  }
  .storefront-copy{ text-align: center; }
  .storefront-copy .kv-compact{
    grid-template-columns: 1fr;   /* stack labels/values for readability */
    text-align: left;             /* keep the details readable */
    max-width: 520px;
    margin: 0 auto;
  }

  /* Feature cards grid already collapses; give them a bit of breathing room */
  .features-grid{ row-gap: 20px; }
}