/* ======================================================================
   Hustob Clothier · About page
   Editorial split layout · sticky lead column · refined typography
   ====================================================================== */

/* Hero variant for editorial pages — uses .hc-hero from home.css */
.hc-hero--editorial {
  min-height: clamp(440px, 60svh, 620px);
  align-items: end;
}
.hc-hero--editorial .hero-overlay {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(200,155,60,.28), transparent 38%),
    linear-gradient(180deg, rgba(10,10,10,.20) 0%, rgba(10,10,10,.32) 35%, rgba(10,10,10,.78) 100%);
}
.hc-hero--editorial .hero-title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  max-width: 22ch;
}

/* Page container */
.about-content {
  width: min(100% - 2rem, var(--hc-max-width));
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6.5rem);
  background: transparent;
}
.about-content .hc-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: none;
  align-items: start;
}

/* Lead column (sticky) */
.about-lead {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  display: flex; flex-direction: column;
  gap: 1.2rem;
}
.about-lead__eyebrow {
  display: inline-flex; align-items: center; gap: .65rem;
  margin: 0;
  color: var(--hc-muted);
  font-family: var(--hc-font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about-lead__eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--hc-accent);
}
.about-lead__title {
  margin: 0;
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  font-variation-settings: "opsz" 96, "wght" 420, "SOFT" 30;
}
.about-lead__title em {
  font-style: italic;
  color: var(--hc-accent-2);
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 100;
}
.about-lead__pull {
  margin: 0;
  color: var(--hc-muted);
  font-size: 1.04rem;
  line-height: 1.65;
}
.about-lead__meta {
  margin: 1rem 0 0;
  padding: 1.25rem;
  background: var(--hc-cream);
  border: 1px solid var(--hc-border-soft);
  border-radius: 14px;
  display: grid; gap: .75rem;
}
.about-lead__meta dt {
  color: var(--hc-muted);
  font-family: var(--hc-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.about-lead__meta dd {
  margin: .15rem 0 0;
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 36, "wght" 460;
}
.about-lead__meta dd a { color: inherit; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }

/* Body column */
.about-body {
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.about-body h2 {
  margin: 0;
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.018em;
  font-variation-settings: "opsz" 96, "wght" 420, "SOFT" 30;
}
.about-body h3 {
  margin: 0 0 .6rem;
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 36, "wght" 460;
}
.about-body p {
  margin: 0;
  color: var(--hc-text);
  font-size: 1.02rem;
  line-height: 1.75;
}
.about-body > section {
  display: flex; flex-direction: column;
  gap: .75rem;
}
.about-body ul:not(.why-choose) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: .65rem;
}
.about-body ul:not(.why-choose) li {
  position: relative;
  padding: .8rem 0 .8rem 2rem;
  color: var(--hc-text);
  font-size: 1rem;
  line-height: 1.55;
  border-bottom: 1px solid var(--hc-border-soft);
}
.about-body ul:not(.why-choose) li:last-child { border-bottom: 0; }
.about-body ul:not(.why-choose) li::before {
  content: "✦";
  position: absolute;
  left: 0; top: .8rem;
  color: var(--hc-accent);
  font-size: .85rem;
}

/* Why Choose grid */
.about-body ul.why-choose {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
  margin: 0; padding: 0;
}
.about-body ul.why-choose li {
  position: relative;
  padding: 1.2rem 1.3rem 1.2rem 2.6rem;
  background: var(--hc-cream);
  border: 1px solid var(--hc-border-soft);
  border-radius: 14px;
  color: var(--hc-text);
  line-height: 1.5;
  font-size: .96rem;
  transition: border-color var(--hc-dur) var(--hc-ease), transform var(--hc-dur) var(--hc-ease), box-shadow var(--hc-dur) var(--hc-ease);
}
.about-body ul.why-choose li::before {
  content: "✓";
  position: absolute;
  left: 1.1rem; top: 1.2rem;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--hc-accent-2);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}
.about-body ul.why-choose li:hover {
  border-color: rgba(200,155,60,.45);
  transform: translateY(-2px);
  box-shadow: var(--hc-shadow-sm);
}

/* CTA */
.about-cta {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 92% 10%, rgba(200,155,60,.22), transparent 50%),
    var(--hc-ink);
  color: #fff;
  overflow: hidden;
}
.about-cta p {
  color: rgba(255,255,255,.84);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 .55rem;
}
.about-cta p:first-child {
  color: #fff;
  font-family: var(--hc-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  font-variation-settings: "opsz" 96, "wght" 460;
}

/* Responsive */
@media (max-width: 980px) {
  .about-content .hc-container { grid-template-columns: 1fr; }
  .about-lead { position: static; }
}