/* ===== About Us page ===== */
body { color: var(--ink); background: var(--cream); }

/* ----- Page banner ----- */
.page-banner {
  position: relative;
  isolation: isolate;
  min-height: 370px;
  padding: 64px 32px;
  background: linear-gradient(rgba(29, 43, 34, .5), rgba(29, 43, 34, .5)), url(../images/banner-lantern-boats.webp) center 38% / cover, var(--gold);
}
.page-banner__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 155px 0 90px;
  text-align: center;
}
.breadcrumb { font-weight: 600; color: #fff; }
.breadcrumb a { font-weight: 400; color: #e8edf1; }
.breadcrumb__sep { margin: 0 3px; }
.breadcrumb__sep svg { display: inline; width: 10px; height: 16px; vertical-align: -2px; }
.page-banner__title {
  font: 500 clamp(48px, 5.7vw, 76px)/1.08 var(--serif);
  letter-spacing: -.025em;
  color: var(--paper);
}
.page-banner__desc { color: #e8edf1; }

/* ----- Shared typography ----- */
.ab { font-family: var(--sans); }
.ab-sec { padding: 60px 32px; background: var(--cream); }
.ab-sec > * { width: 100%; max-width: 1160px; margin-left: auto; margin-right: auto; }
.ab-title {
  font: 500 48px/1.08 var(--serif);
  letter-spacing: -.025em;
  color: var(--ink);
}
.ab-title em { color: var(--rust-dark); }
.ab-title[data-eyebrow]::before {
  content: attr(data-eyebrow);
  display: block;
  margin-bottom: 22px;
  font: 600 10px/1.5 var(--sans);
  letter-spacing: .24em;
  color: var(--rust-dark);
}
.ab-subtitle { font: 500 32px/1.12 var(--serif); letter-spacing: -.025em; color: var(--ink); }
.ab-subtitle--30 { font-size: 30px; line-height: 1.15; }
.ab-text { font-size: 15px; line-height: 1.85; color: var(--text); }
.ab-eyebrow { font-size: 10px; font-weight: 600; line-height: 1.85; letter-spacing: .24em; color: var(--rust-dark); }
.ab-btn {
  display: inline-block;
  padding: 15px 24px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--paper);
  background: var(--sage);
  border: 1px solid var(--sage);
  border-radius: 3px;
  transition: background-color .25s, transform .25s;
}
.ab-btn:hover { background: var(--sage-dark); transform: translateY(-2px); }

/* ----- Story ----- */
.ab-story { display: flex; flex-direction: column; gap: 48px; }
.ab-story__intro {
  display: grid;
  grid-template-areas: "eyebrow copy" "title copy";
  grid-template-columns: 1.18fr 1fr;
  gap: 18px 64px;
  align-items: center;
}
.ab-story__eyebrow { grid-area: eyebrow; align-self: end; }
.ab-story__title { grid-area: title; align-self: start; font-size: clamp(38px, 4.1vw, 54px); }
.ab-story__copy { grid-area: copy; max-width: 520px; }
.ab-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 42px; }
.ab-value { display: flex; flex-direction: column; gap: 18px; min-width: 0; overflow: hidden; border-radius: 24px 4px 4px; }
.ab-value__img {
  width: 100%;
  height: 178px;
  object-fit: cover;
  border-radius: 24px 4px 4px;
  transition: transform .5s, filter .5s;
}
.ab-value__body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.ab-value__title { margin-bottom: 10px; font: 500 29px/1.15 var(--serif); letter-spacing: -.025em; color: var(--ink); }
.ab-value__lead { font: italic 500 19px/1.4 var(--serif); color: var(--rust-dark); }
.ab-value__text { font-size: 13px; line-height: 1.8; color: var(--text); }
@media (min-width: 1025px) and (hover: hover) {
  .ab-value:hover .ab-value__img { transform: scale(1.035); filter: saturate(1.06); }
}

/* ----- Philosophy ----- */
.ab-philo { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-philo__head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 64px; align-items: end; }
.ab-philo__lead { max-width: 520px; font: italic 500 23px/1.5 var(--serif); color: var(--ink); }
.ab-philo__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.ab-philo__item { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px 4px 4px; }
.ab-philo__num { font: 500 30px/1 var(--serif); color: var(--gold); }
.ab-philo__title { font: 500 27px/1.15 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.ab-philo__close { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 720px; margin-top: 48px; text-align: center; }
.ab-philo__invite { font: italic 500 22px/1.5 var(--serif); color: var(--brown-2); }
.ab-philo__sign { margin-top: 6px; font: 500 28px/1.3 var(--serif); color: var(--ink); }
.ab-philo__sign em { color: var(--rust-dark); }

/* ----- Approach ----- */
.ab-approach {
  display: grid;
  grid-template-areas: "heading image" "lead image" "body image";
  grid-template-columns: .92fr 1.08fr;
  gap: 24px 72px;
  align-items: start;
}
.ab-approach__title { grid-area: heading; align-self: end; }
.ab-approach__lead { grid-area: lead; max-width: 460px; }
.ab-approach__media { grid-area: image; align-self: stretch; min-width: 0; }
.ab-approach__img { width: 100%; height: 500px; object-fit: cover; object-position: center; border-radius: 4px 70px 4px 4px; }
.ab-approach__body { grid-area: body; display: flex; flex-direction: column; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.ab-approach__note { padding-top: 18px; }

/* ----- Care ----- */
/* Founder note: round portrait beside a short letter */
.ab-founder { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 64px; }
.ab-founder__photo { position: relative; width: 300px; aspect-ratio: 1; }
.ab-founder__photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--line); border-radius: 50%; }
.ab-founder__img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; border-radius: 50%; box-shadow: 0 10px 28px rgba(56, 45, 38, .12); }
.ab-founder__body { display: flex; flex-direction: column; gap: 22px; }
.ab-founder__quote { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0; font: italic 500 23px/1.55 var(--serif); color: var(--ink); }
.ab-founder__name { display: flex; flex-direction: column; gap: 2px; font: 500 26px/1.2 var(--serif); color: var(--ink); }
/* Our story: a long letter, so the portrait stays in view beside it on wide screens */
.ab-letter .ab-founder { align-items: start; }
.ab-letter .ab-founder__photo { position: sticky; top: calc(var(--header-h, 90px) + 40px); display: flex; flex-direction: column; align-items: center; gap: 34px; aspect-ratio: auto; }
.ab-letter .ab-founder__photo::before { content: none; }
.ab-founder__frame { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.ab-founder__frame::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--line); border-radius: 50%; }
.ab-letter .ab-founder__name { align-items: center; text-align: center; }
.ab-letter .ab-founder__body { max-width: 680px; }
.ab-letter__lead { font: italic 500 26px/1.45 var(--serif); color: var(--ink); }
.ab-letter__text { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 1.9; color: var(--text); }
.ab-letter__turn { padding: 6px 0 6px 20px; font: italic 500 24px/1.4 var(--serif); color: var(--rust-dark); border-left: 2px solid var(--gold); }
.ab-letter__close { margin-top: 6px; font: 500 28px/1.3 var(--serif); color: var(--ink); }
.ab-letter__close em { color: var(--rust-dark); white-space: nowrap; }
.ab-founder__name span { font: 600 11px/1.6 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--rust); }

.ab-care { display: grid; grid-template-columns: 1fr 1.1fr; gap: 38px 68px; }
.ab-care__intro { align-self: center; }
.ab-care__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-areas: "photo rest" "photo choice";
  grid-template-columns: 1.06fr 1fr;
  gap: 32px 72px;
  align-items: center;
  margin-top: 24px;
}
.ab-care__photo { grid-area: photo; min-width: 0; }
.ab-care__img { width: 100%; height: 430px; object-fit: cover; object-position: center 60%; border-radius: 4px 4px 70px; }
.ab-care__item { display: flex; flex-direction: column; gap: 16px; }
.ab-care__item--rest { grid-area: rest; align-self: end; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.ab-care__item--choice { grid-area: choice; align-self: start; }

/* ----- Place ----- */
.ab-place {
  display: grid;
  grid-template-areas: "title image" "copy image" "cta image";
  grid-template-columns: .94fr 1.06fr;
  gap: 22px 72px;
  align-items: start;
}
.ab-place__title { grid-area: title; align-self: end; }
.ab-place__copy { grid-area: copy; align-self: center; }
.ab-place__img { grid-area: image; align-self: stretch; width: 100%; height: 450px; margin-top: 18px; object-fit: cover; border-radius: 70px 4px 4px; }
/* wide panorama in a near-square tile: keep Lady Buddha and the whole Dragon Bridge in frame */
.ab-place__img--pano { object-position: 95% 50%; }
.ab-place__cta { grid-area: cta; place-self: start; margin-top: 8px; }

/* ----- Talk / form ----- */
.ab-talk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: var(--sand);
  border-top: 1px solid var(--line);
}
.ab-talk__title { max-width: 850px; text-align: center; }
.ab-talk__lead { max-width: 670px; text-align: center; }
.ab-talk__grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: 48px; margin-top: 30px; }
.ab-talk__media { min-width: 0; }
.ab-talk__img { width: 100%; height: 420px; object-fit: cover; border-radius: 4px; }
.ab-talk__card { min-width: 0; padding: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.ab-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 18px; }
.ab-form__field { min-width: 0; padding-bottom: 20px; }
.ab-form__field--full, .ab-form__actions { grid-column: 1 / -1; }
.ab-form__label { display: block; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.ab-form__control {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 7px;
  padding: 12px 14px;
  font: 400 13px/1.5 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid #d9d1c5;
  border-radius: 3px;
}
.ab-form__control::placeholder { color: #8b897d; }
.ab-form__control:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.ab-form__control--area { height: 105px; min-height: 105px; resize: vertical; }
.ab-form__actions { align-self: end; }
.ab-form__submit {
  min-height: 44px;
  padding: 13px 22px;
  font-size: 12px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--paper);
  background: var(--sage);
  border: 1px solid var(--sage);
  border-radius: 3px;
  transition: background-color .25s;
}
.ab-form__submit:hover { background: var(--sage-dark); }

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .page-banner__inner { padding: 120px 0 65px; }
  .ab-sec { padding: 48px 28px; }
  .ab-story__intro, .ab-approach, .ab-care, .ab-care__grid, .ab-place { column-gap: 36px; }
  .ab-story__intro { gap: 14px 36px; }
  .ab-story__copy { max-width: 100%; }
  .ab-approach__title, .ab-care__title, .ab-place__title, .ab-talk__title { font-size: 40px; }
  .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .ab-philo__head { gap: 14px 36px; }
  .ab-philo__list { grid-template-columns: minmax(0, 1fr); }
  .ab-value__img { height: 220px; }
  .ab-talk__grid { gap: 28px; }
  .ab-talk__card { order: -1; padding: 24px; }
  .ab-form { grid-template-columns: 1fr; }
}

/* ----- Mobile ----- */
@media (max-width: 767px) {
  .page-banner { min-height: 290px; padding: 48px 22px; }
  .ab-sec { padding: 40px 22px; }
  .ab-text { font-size: 14px; }
  .ab-story__intro { grid-template-areas: "eyebrow" "title" "copy"; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
  .ab-story__title { font-size: 37px; }
  .ab-values { gap: 28px 20px; margin-top: 30px; }
  .ab-value__img { height: 145px; border-radius: 18px 3px 3px; }
  .ab-value__title { font-size: 26px; }
  .ab-philo__head { grid-template-columns: minmax(0, 1fr); }
  .ab-philo__lead { font-size: 20px; }
  .ab-philo__item { padding: 24px 22px; }
  .ab-philo__title { font-size: 24px; }
  .ab-philo__invite { font-size: 20px; }
  .ab-philo__sign { font-size: 24px; }
  .ab-approach { grid-template-areas: "heading" "lead" "image" "body"; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .ab-approach__img { height: 320px; border-radius: 3px 42px 3px 3px; }
  .ab-care { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-founder { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; }
  .ab-founder__photo { width: min(220px, 60vw); }
  .ab-founder__quote { font-size: 20px; }
  .ab-letter .ab-founder { justify-items: stretch; }
  .ab-letter .ab-founder__photo { position: static; width: min(220px, 60vw); justify-self: center; gap: 26px; }
  .ab-letter__lead { font-size: 22px; }
  .ab-letter__text { font-size: 15px; }
  .ab-letter__turn { font-size: 21px; }
  .ab-letter__close { font-size: 24px; }
  .ab-care__grid { grid-template-areas: "photo" "rest" "choice"; grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ab-care__img { height: 320px; border-radius: 3px 3px 42px; }
  .ab-place { grid-template-areas: "title" "copy" "image" "cta"; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ab-place__img { height: 320px; border-radius: 42px 3px 3px; }
  .ab-approach__title, .ab-care__title, .ab-place__title, .ab-talk__title { font-size: 38px; }
  .ab-talk__title, .ab-talk__lead { text-align: left; }
  .ab-talk__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
  .ab-talk__img { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-value__img, .ab-btn { transition: none; transform: none; }
}
.ab-letter { scroll-margin-top: var(--header-h, 90px); }

/* the footer's wave band picks up the sand of the closing section, so the two read as one */
body:has(.ab-talk) .site-footer { --footer-lead: var(--sand); }

/* founder portrait: reveal as a widening circle, so the thin ring 14px outside the photo is never clipped */
.js-anim .ab-founder__photo[data-anim="img"] { clip-path: circle(30% at 50% 50%); }
.js-anim .ab-founder__photo[data-anim="img"].is-in { clip-path: circle(100% at 50% 50%); }