.about-page {
  --about-ink: #071a35;
  --about-gold: #c99a2e;
  --about-gold-dark: #9b6d13;
  --about-ivory: #f7f3eb;
  --about-paper: #fffdf8;
  --about-cream: #eee7dc;
  --about-muted: #657080;
  --about-line: rgba(7, 26, 53, .15);
  background: var(--about-ivory);
  color: var(--about-ink);
}

.about-page main { overflow: hidden; }
.about-page .site-header { position: absolute; background: rgba(247, 243, 235, .96); box-shadow: none; }
.about-page h1,
.about-page h2,
.about-page h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.about-page em { color: #8f620d; font-style: normal; }

.about-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--about-gold-dark);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
  line-height: 1.4;
}
.about-label b { color: var(--about-ink); font-size: 10px; letter-spacing: .08em; }
.about-label::after { content: ''; width: 42px; height: 1px; background: rgba(155, 109, 19, .55); }

/* 01 / HERO */
.about-hero {
  min-height: clamp(680px, 62vw, 860px);
  padding: 86px 0 0;
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--about-ivory);
}
.about-hero-visual { margin: 0; position: absolute; inset: 86px 0 0; }
.about-hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-hero::after {
  content: '';
  position: absolute;
  inset: 86px 0 0;
  background: linear-gradient(90deg, rgba(247, 243, 235, .82) 0%, rgba(247, 243, 235, .66) 31%, rgba(247, 243, 235, .18) 56%, transparent 72%);
  pointer-events: none;
}
.about-hero-copy {
  width: min(560px, 43vw);
  margin-left: 7vw;
  padding: clamp(86px, 9vw, 128px) 0 70px;
  position: relative;
  z-index: 2;
  align-self: center;
}
.about-hero h1 {
  max-width: 560px;
  margin: 25px 0 31px;
  color: var(--about-ink);
  font-size: clamp(54px, 5.25vw, 76px);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.about-hero-body {
  width: min(460px, 100%);
  padding-top: 24px;
  border-top: 1px solid rgba(7, 26, 53, .26);
}
.about-hero-body p {
  margin: 0 0 17px;
  color: var(--about-ink);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.78;
}
.about-hero-notes {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--about-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .065em;
}
.about-hero-notes span { display: flex; align-items: center; gap: 20px; }
.about-hero-notes span:not(:last-child)::after { content: ''; width: 20px; height: 1px; background: var(--about-gold); }

/* 02 / FOUNDERS */
.about-founders { padding: clamp(88px, 8vw, 112px) 5vw clamp(92px, 8vw, 112px); background: var(--about-paper); }
.about-section-head { width: min(1220px, 90vw); margin: 0 auto 52px; }
.about-section-head h2 {
  max-width: 850px;
  margin: 22px 0 0;
  color: var(--about-ink);
  font-size: clamp(39px, 4.2vw, 58px);
  line-height: 1.14;
  letter-spacing: -.04em;
}
.founder-spread {
  width: min(1320px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(270px, .62fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.founder-spread + .founder-spread { margin-top: clamp(58px, 6vw, 82px); }
.founder-art { margin: 0; position: relative; }
.founder-art::after {
  content: '';
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgba(155, 109, 19, .3);
  pointer-events: none;
}
.founder-art img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  object-fit: contain;
  background: #f4efe5;
  box-shadow: 0 18px 45px rgba(7, 26, 53, .1);
}
.founder-summary { max-width: 420px; padding-top: 24px; border-top: 1px solid var(--about-gold); }
.founder-number { color: var(--about-gold-dark); font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.founder-summary h3 {
  margin: 17px 0 11px;
  color: var(--about-ink);
  font-size: clamp(31px, 3vw, 43px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.founder-summary h3 small {
  display: block;
  margin-top: 8px;
  font-family: 'DM Sans', 'Noto Sans TC', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
}
.founder-role {
  margin: 0 0 23px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--about-line);
  color: var(--about-gold-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.founder-role span { color: var(--about-muted); letter-spacing: .08em; }
.founder-summary > p:last-child { margin: 0; color: var(--about-muted); font-size: 17px; line-height: 1.8; }
.founder-shawn { transform: translateX(-1.2vw); }
.founder-kevin { grid-template-columns: minmax(270px, .62fr) minmax(0, 1.62fr); transform: translateX(1.2vw); }
.founder-kevin .founder-art { grid-column: 2; grid-row: 1; }
.founder-kevin .founder-summary { grid-column: 1; grid-row: 1; justify-self: end; }
.founder-kevin .founder-art::after { inset: 12px 12px -12px -12px; }

/* 03 / BELIEF */
.about-belief { padding: clamp(88px, 8vw, 112px) 7vw; background: var(--about-cream); }
.belief-inner { width: min(1040px, 86vw); margin: 0 auto; }
.about-belief h2 {
  max-width: 850px;
  margin: 23px 0 31px;
  color: var(--about-ink);
  font-size: clamp(43px, 5vw, 67px);
  line-height: 1.08;
  letter-spacing: -.05em;
}
.belief-copy { max-width: 680px; }
.belief-copy p { margin: 0 0 18px; color: var(--about-muted); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.8; }
.belief-values {
  margin: 38px 0 0;
  padding: 23px 0;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  color: var(--about-ink);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 600;
  letter-spacing: .05em;
}
.belief-values span { display: flex; align-items: center; }
.belief-values span:not(:last-child)::after { content: '｜'; margin: 0 clamp(14px, 2.4vw, 32px); color: var(--about-gold); font-weight: 400; }
.belief-closing {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.belief-closing img { width: 150px; height: 58px; object-fit: contain; object-position: left center; }
.belief-closing p {
  margin: 0;
  padding-left: clamp(28px, 4vw, 54px);
  border-left: 1px solid rgba(155, 109, 19, .46);
  color: var(--about-ink);
  font-family: Georgia, 'Times New Roman', 'Noto Sans TC', serif;
  font-size: clamp(29px, 3.1vw, 43px);
  line-height: 1.35;
  letter-spacing: -.03em;
}

@media (max-width: 980px) {
  .about-hero-copy { width: min(580px, 54vw); }
  .founder-spread,
  .founder-kevin {
    width: min(760px, 90vw);
    grid-template-columns: 1fr;
    gap: 30px;
    transform: none;
  }
  .founder-kevin .founder-art,
  .founder-kevin .founder-summary { grid-column: 1; }
  .founder-kevin .founder-art { grid-row: 1; }
  .founder-kevin .founder-summary { grid-row: 2; justify-self: start; }
  .founder-summary { max-width: 560px; }
}

@media (max-width: 767px) {
  .about-page .site-header { height: 74px; }
  .about-hero { min-height: 0; padding-top: 74px; display: block; }
  .about-hero::after { display: none; }
  .about-hero-copy {
    width: auto;
    margin: 0;
    padding: 52px 21px 42px;
    background: var(--about-ivory);
  }
  .about-hero h1 { margin: 21px 0 26px; font-size: clamp(36px, 10.5vw, 42px); line-height: 1.08; }
  .about-hero-body { padding-top: 20px; }
  .about-hero-body p { margin-bottom: 13px; font-size: 16.5px; line-height: 1.75; }
  .about-hero-notes { margin-top: 25px; gap: 8px 11px; font-size: 9px; }
  .about-hero-notes span { gap: 11px; }
  .about-hero-notes span:not(:last-child)::after { width: 10px; }
  .about-hero-visual { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
  .about-hero-visual img { object-position: 57% center; }

  .about-founders { padding: 60px 21px 65px; }
  .about-section-head { width: 100%; margin-bottom: 34px; }
  .about-section-head h2 { margin-top: 18px; font-size: clamp(28px, 8vw, 34px); line-height: 1.22; }
  .founder-spread,
  .founder-kevin {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    transform: none;
  }
  .founder-spread + .founder-spread { margin-top: 56px; }
  .founder-art { width: calc(100% + 10px); max-width: none; }
  .founder-shawn .founder-art { align-self: flex-start; transform: translateX(-7px); }
  .founder-kevin .founder-art { order: 0; align-self: flex-end; transform: translateX(7px); }
  .founder-kevin .founder-summary { order: 1; }
  .founder-art::after { inset: 7px -7px -7px 7px; }
  .founder-kevin .founder-art::after { inset: 7px 7px -7px -7px; }
  .founder-summary { width: 100%; max-width: none; padding-top: 20px; }
  .founder-summary h3 { margin-top: 15px; font-size: 32px; }
  .founder-summary h3 small { font-size: 13px; }
  .founder-role { margin-bottom: 18px; padding-bottom: 16px; }
  .founder-summary > p:last-child { font-size: 16px; line-height: 1.78; }

  .about-belief { padding: 60px 21px 66px; }
  .belief-inner { width: 100%; }
  .about-belief h2 { margin: 19px 0 25px; font-size: clamp(30px, 8vw, 32px); line-height: 1.16; letter-spacing: -.045em; }
  .belief-copy p { margin-bottom: 14px; font-size: 16px; line-height: 1.78; }
  .belief-values { margin-top: 29px; padding: 19px 0; flex-wrap: wrap; gap: 8px 0; font-size: 16px; }
  .belief-values span:not(:last-child)::after { margin: 0 8px; }
  .belief-closing { margin-top: 32px; grid-template-columns: 1fr; gap: 22px; }
  .belief-closing img { width: 130px; height: 50px; }
  .belief-closing p { padding: 19px 0 0; border-left: 0; border-top: 1px solid rgba(155, 109, 19, .46); font-size: 29px; }
}

@media (max-width: 390px) {
  .about-label { gap: 9px; font-size: 8px; }
  .about-label::after { width: 28px; }
  .about-hero-copy,
  .about-founders,
  .about-belief { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page * { scroll-behavior: auto; }
}