.mtb-about-hub{background:#fffcf7;color:#2f382f;font-family:'Noto Sans','Roboto','Segoe UI',Arial,sans-serif}.mtb-about-hub__wrap{max-width:1160px;margin:auto;padding-left:20px;padding-right:20px}.mtb-about-hub__eyebrow{font:700 12px Arial,sans-serif;letter-spacing:.16em;color:#ad4f54}.mtb-about-hub h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1.14;font-weight:400}.mtb-about-hub h2{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400}.mtb-about-hub p{line-height:1.75;color:#5c655e}.mtb-about-hub__hero{min-height:430px;background:linear-gradient(90deg,rgba(255,252,247,.97),rgba(255,252,247,.3)),var(--about-image) center/cover;display:flex;align-items:center}.mtb-about-hub__hero .mtb-about-hub__wrap{width:100%}.mtb-about-hub__hero p{font-size:1.5rem}.mtb-about-hub__story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;padding-top:60px;padding-bottom:60px}.mtb-about-hub__story img{width:100%;height:340px;object-fit:cover}.mtb-about-hub__story h2{margin:15px 0}.mtb-about-hub__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-bottom:70px}.mtb-about-hub__card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #eee3d7;overflow:hidden;transition:transform .2s}.mtb-about-hub__card:hover{transform:translateY(-3px);color:inherit}.mtb-about-hub__card img{width:100%;height:240px;object-fit:cover}.mtb-about-hub__card div{padding:20px}.mtb-about-hub__card h2{font-size:1.7rem}.mtb-about-hub__card span,.mtb-about-hub__back{color:#b24950}.mtb-about-hub__crumb{padding-top:22px;padding-bottom:22px;font:14px Arial,sans-serif}.mtb-about-hub__crumb a{color:#865955}.mtb-about-hub__article-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:30px;padding-bottom:45px}.mtb-about-hub__article-hero img{width:100%;height:360px;object-fit:cover}.mtb-about-hub__body{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:70px;padding-bottom:70px}.mtb-about-hub__paragraph{padding:18px 0;border-bottom:1px solid #e7e1d9}.mtb-about-hub__paragraph h2{font-size:1.7rem}.mtb-about-hub__body aside{align-self:start;position:sticky;top:100px}.mtb-about-hub__body aside a{display:block;padding:11px 0;color:#555;border-bottom:1px solid #e7e1d9;text-decoration:none}.mtb-about-hub__body aside a[aria-current=page]{color:#b24950}.mtb-about-hub__back{display:inline-block;margin-top:25px}.mtb-about-hub__body blockquote{font-size:1.4rem;border-left:3px solid #d4b189;padding-left:20px}.mtb-about-menu-toggle{border:0;background:transparent;cursor:pointer}.mtb-about-menu-panel{display:none;position:absolute;z-index:1200;background:#fffdf8;min-width:235px;padding:10px;box-shadow:0 12px 28px #0002;border:1px solid #e9dbca}.mtb-about-menu-panel.is-open{display:block}.mtb-about-menu-panel a{display:block;padding:10px;color:#263b30;text-decoration:none}.mtb-about-menu-panel a:hover{background:#f6eee6}@media(max-width:991px){.mtb-about-hub__story,.mtb-about-hub__article-hero,.mtb-about-hub__body{grid-template-columns:1fr;gap:22px}.mtb-about-hub__body aside{position:static}.mtb-about-menu-panel{position:static;box-shadow:none}.mtb-about-hub__cards{grid-template-columns:repeat(2,minmax(0,1fr))}.mtb-about-hub__story img,.mtb-about-hub__article-hero img{height:270px}.mtb-about-hub__hero{min-height:340px;background:linear-gradient(90deg,rgba(255,252,247,.94),rgba(255,252,247,.65)),var(--about-image) center/cover}}
/* Consistent Unicode Vietnamese typography with the parent Minh Tam Bao site. */
.mtb-about-hub h1,.mtb-about-hub h2,.mtb-about-hub h3,.mtb-about-hub p,.mtb-about-hub blockquote,.mtb-about-hub a,.mtb-about-hub span{font-family:inherit;}
.mtb-about-hub__eyebrow,.mtb-about-hub__crumb{font-family:'Noto Sans','Roboto',Arial,sans-serif;}

/* Dedicated full-width editorial cover, distinct from the introduction content. */
.mtb-about-hub__cover{width:100%;background:#f5eee6;overflow:hidden}
.mtb-about-hub__cover img{display:block;width:100%;height:clamp(280px,37vw,560px);object-fit:cover;object-position:center 48%}
.mtb-about-hub__intro{padding-top:54px;padding-bottom:44px;text-align:left}
.mtb-about-hub__intro h1{margin:13px 0 15px}
.mtb-about-hub__intro-quote{font-size:clamp(1.1rem,2vw,1.55rem);color:#4b544b}
.mtb-about-hub__intro-lead{max-width:800px;font-size:1.05rem}
@media(max-width:767px){.mtb-about-hub__cover img{height:260px;object-position:63% center}.mtb-about-hub__intro{padding-top:32px;padding-bottom:25px}}

/* About cover: text at left, original lotus photo at right in the SAME hero. */
.mtb-about-hub__cover--text-left{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(360px,39vw,540px);overflow:hidden;background:#fbfaf7}
.mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;z-index:-2}
.mtb-about-hub__cover-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.98) 23%,rgba(255,252,247,.88) 39%,rgba(255,252,247,.18) 65%,transparent 86%)}
.mtb-about-hub__cover-content{width:100%;padding-top:48px;padding-bottom:48px}
.mtb-about-hub__cover-content h1{max-width:570px;margin:14px 0 16px;color:#1d2720}
.mtb-about-hub__cover-content .mtb-about-hub__intro-quote{max-width:520px;margin:0 0 13px;line-height:1.45;color:#39483e}
.mtb-about-hub__cover-content .mtb-about-hub__intro-lead{max-width:470px;margin:0;font-size:1rem;color:#59665b}
@media(max-width:767px){
 .mtb-about-hub__cover--text-left{min-height:370px}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{height:100%;object-position:70% center}
 .mtb-about-hub__cover-shade{background:linear-gradient(90deg,rgba(255,252,247,.98) 0%,rgba(255,252,247,.94) 46%,rgba(255,252,247,.68) 75%,rgba(255,252,247,.40))}
 .mtb-about-hub__cover-content{padding-top:35px;padding-bottom:35px}
 .mtb-about-hub__cover-content h1{max-width:310px;font-size:clamp(2rem,8vw,2.8rem)}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-quote{max-width:280px;font-size:1.1rem}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-lead{max-width:290px;font-size:.9rem}
}

/* Balanced editorial proportions for About landing, desktop and mobile. */
@media(min-width:992px){
 .mtb-about-hub__cover--text-left{min-height:390px;height:clamp(390px,30vw,470px)}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{object-position:center 53%}
 .mtb-about-hub__cover-shade{background:linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.98) 24%,rgba(255,252,247,.88) 35%,rgba(255,252,247,.30) 53%,rgba(255,252,247,0) 70%)}
 .mtb-about-hub__cover-content h1{max-width:680px;font-size:clamp(2.5rem,3.1vw,3.45rem);line-height:1.18;letter-spacing:-.035em;white-space:nowrap}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-quote{font-size:clamp(1.16rem,1.5vw,1.42rem)}
 .mtb-about-hub__cover-content{padding-top:36px;padding-bottom:36px}
 .mtb-about-hub__story{gap:38px;padding-top:43px;padding-bottom:42px}
 .mtb-about-hub__story img{height:310px}
 .mtb-about-hub__story h2{font-size:clamp(1.95rem,2.45vw,2.7rem);line-height:1.25}
}
@media(min-width:992px) and (max-width:1199px){
 .mtb-about-hub__cover-content h1{font-size:clamp(2.35rem,3.5vw,3rem)}
}
@media(max-width:991px){
 .mtb-about-hub__cover-content h1{line-height:1.2;letter-spacing:-.025em}
 .mtb-about-hub__story{padding-top:32px;padding-bottom:30px}
}

/* Mobile: show the complete 16:9 cover photograph without cropping.
   Keep the heading and description above the image instead of laying text over it. */
@media (max-width:767px){
 .mtb-about-hub__cover--text-left{
  display:flex;flex-direction:column-reverse;align-items:stretch;
  min-height:0;height:auto;overflow:visible;background:#fffcf7;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{
  position:static;inset:auto;display:block;z-index:auto;
  width:100%;height:auto;aspect-ratio:auto;
  object-fit:contain;object-position:center;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-shade{display:none}
 .mtb-about-hub__cover-content{
  width:100%;padding-top:30px;padding-bottom:26px;
 }
 .mtb-about-hub__cover-content h1{max-width:none;margin:0 0 14px}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-quote{max-width:none}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-lead{max-width:none}
}

/* Mobile: reference composition, copy LEFT and lotus photo RIGHT in one banner. */
@media (max-width:767px){
 .mtb-about-hub__cover--text-left{
  display:flex;position:relative;isolation:isolate;align-items:center;
  min-height:260px;height:auto;overflow:hidden;background:#fffcf7;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{
  display:block;position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;min-height:0;object-fit:cover;
  object-position:67% center;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-shade{
  display:block;position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#fffcf7 0%,rgba(255,252,247,.98) 35%,rgba(255,252,247,.84) 50%,rgba(255,252,247,.12) 76%,transparent 100%);
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-content{
  display:block;width:100%;min-width:0;box-sizing:border-box;
  padding:24px 15px;align-self:center;
 }
 .mtb-about-hub__cover-content h1{
  max-width:66%;margin:0 0 10px;
  font-size:clamp(1.25rem,5.2vw,1.9rem);line-height:1.18;
  letter-spacing:-.025em;white-space:normal;
 }
 .mtb-about-hub__cover-content .mtb-about-hub__intro-quote{
  max-width:61%;margin:0 0 8px;font-size:clamp(.82rem,3.2vw,1rem);line-height:1.42;
 }
 .mtb-about-hub__cover-content .mtb-about-hub__intro-lead{
  max-width:59%;margin:0;font-size:clamp(.7rem,2.65vw,.88rem);line-height:1.48;
 }
}
@media(max-width:359px){
 .mtb-about-hub__cover-content h1{font-size:1.16rem}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-lead{font-size:.7rem}
}

/* New photo already contains soft white negative space at left: avoid double haze. */
@media(min-width:768px){
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-shade{background:transparent}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{object-position:center center}
}
@media(max-width:767px){
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-shade{background:linear-gradient(90deg,rgba(255,252,247,.24),rgba(255,252,247,0) 78%)}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{object-position:63% center}
}

/* Preserve the full 16:9 cover photo on desktop: no clipped tea or herbs. */
@media(min-width:992px){
 .mtb-about-hub__cover--text-left{
   height:auto;min-height:0;aspect-ratio:16/9;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{
   width:100%;height:100%;object-fit:contain;object-position:center;
 }
}
@media(min-width:768px) and (max-width:991px){
 .mtb-about-hub__cover--text-left{height:auto;min-height:0;aspect-ratio:16/9}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{object-fit:contain;object-position:center}
}

/* Balanced desktop hero: show key objects without excessively tall empty tabletop. */
@media(min-width:992px){
 .mtb-about-hub__cover--text-left{aspect-ratio:auto;height:clamp(440px,31vw,560px);min-height:0}
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-image{
   object-fit:cover;object-position:center 58%;
 }
 .mtb-about-hub__cover--text-left .mtb-about-hub__cover-content{padding-top:28px;padding-bottom:28px}
 .mtb-about-hub__cover-content h1{font-size:clamp(2.45rem,2.95vw,3.35rem);margin-bottom:12px}
 .mtb-about-hub__cover-content .mtb-about-hub__intro-quote{line-height:1.4;margin-bottom:10px}
 .mtb-about-hub__story{padding-top:38px}
}

/* Editorial details: shared design for the four Minh Tam Bao About articles. */
.mtb-about-detail .mtb-about-hub__crumb{padding-top:25px;padding-bottom:8px;color:#7d766b}
.mtb-about-detail .mtb-about-hub__article-hero{padding-top:28px;padding-bottom:52px;gap:5%}
.mtb-about-detail .mtb-about-hub__article-hero>div{padding:8px 0}
.mtb-about-detail .mtb-about-hub__article-hero h1{margin:20px 0 18px;font-size:clamp(2.4rem,4.1vw,4rem);line-height:1.13}
.mtb-about-detail .mtb-about-hub__article-hero p{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.7;max-width:520px}
.mtb-about-detail .mtb-about-hub__article-hero img{height:clamp(285px,30vw,420px);border-radius:3px;box-shadow:0 12px 30px rgba(55,41,24,.07)}
.mtb-about-detail .mtb-about-hub__body{gap:8%;padding-bottom:95px}
.mtb-about-detail__article{min-width:0}
.mtb-about-detail .mtb-about-hub__paragraph{border-bottom:1px solid #e5ded2;padding:24px 0 30px}
.mtb-about-detail .mtb-about-hub__paragraph:first-child{padding-top:0}
.mtb-about-detail .mtb-about-hub__paragraph h2{color:#263b32;font-size:clamp(1.65rem,2.5vw,2.15rem);margin:0 0 14px}
.mtb-about-detail .mtb-about-hub__paragraph p{font-size:1.04rem;line-height:1.85}
.mtb-about-detail .mtb-about-hub__body aside{border-left:1px solid #e8dfd2;padding:15px 0 15px 26px}
.mtb-about-detail .mtb-about-hub__body aside h2{font-size:1.45rem;margin-bottom:17px}
.mtb-about-detail .mtb-about-hub__body aside a:hover{color:#a83e46}
.mtb-about-detail__value-list{display:grid;gap:17px}
.mtb-about-detail__value{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;padding:24px;background:#fff;border:1px solid #e9e1d4;border-radius:4px}
.mtb-about-detail__number{font:600 1.3rem 'Noto Sans',Arial,sans-serif;color:#b15056}
.mtb-about-detail__value h2{font-size:1.5rem;color:#263b32;margin:0 0 8px}
.mtb-about-detail__value p{margin:0}
.mtb-about-detail__closing{margin-top:26px;padding:26px;background:#f4eee4;border-left:3px solid #ad6460}
.mtb-about-detail__timeline{position:relative;margin-top:28px;border-left:2px solid #d6b89d}
.mtb-about-detail__milestone{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:20px;padding:0 0 38px 27px}
.mtb-about-detail__milestone:before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:14px;border-radius:50%;background:#a7424b;border:3px solid #fffcf7}
.mtb-about-detail__year{font:700 1.2rem 'Noto Sans',Arial,sans-serif;color:#af424b}
.mtb-about-detail__milestone h2{font-size:1.55rem;color:#263b32;margin:0 0 8px}
.mtb-about-detail__milestone p{margin:0}
.mtb-about-detail__article blockquote{margin:0 0 28px;padding:22px 26px;background:#f5efe4;border-left:3px solid #b89565;line-height:1.6}
@media(max-width:991px){
 .mtb-about-detail .mtb-about-hub__article-hero{gap:18px;padding-bottom:30px}
 .mtb-about-detail .mtb-about-hub__article-hero img{height:auto;max-height:380px;aspect-ratio:4/3;object-fit:cover}
 .mtb-about-detail .mtb-about-hub__body{gap:32px}
 .mtb-about-detail .mtb-about-hub__body aside{position:static;border-left:0;border-top:1px solid #e7e0d5;padding:25px 0 0}
}
@media(max-width:480px){
 .mtb-about-detail .mtb-about-hub__article-hero h1{font-size:2.25rem}
 .mtb-about-detail__milestone{grid-template-columns:1fr;gap:6px;padding-bottom:30px}
 .mtb-about-detail__value{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px}
}

/* Allow translated headings to wrap within the light half of the hero. */
@media(min-width:992px){
 html[lang]:not([lang="vi"]) .mtb-about-hub__cover-content h1{
  max-width:46%;font-size:clamp(2.15rem,2.8vw,3.1rem);
  white-space:normal;overflow-wrap:break-word;text-wrap:balance;
 }
}
@media(max-width:767px){
 html[lang]:not([lang="vi"]) .mtb-about-hub__cover-content h1{
  max-width:66%;font-size:clamp(1.1rem,4.4vw,1.7rem);
  white-space:normal;overflow-wrap:anywhere;
 }
}

/* About landing: prominent, wide editorial story just below the full-width hero.
   Keep article/detail pages and the four navigation cards unchanged. */
@media(min-width:992px){
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story{
  width:100%;max-width:none;box-sizing:border-box;
  padding:clamp(36px,3.1vw,60px) clamp(20px,3.5vw,72px);
  display:grid;grid-template-columns:minmax(0,57%) minmax(0,1fr);
  gap:clamp(28px,3.4vw,72px);align-items:center;
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story>img{
  width:100%;height:clamp(380px,32vw,540px);
  object-fit:cover;object-position:center;
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story>div{
  min-width:0;max-width:530px;
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story h2{
  font-size:clamp(2.35rem,3.15vw,3.65rem);
  line-height:1.16;margin:16px 0 20px;
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story p{
  max-width:470px;font-size:clamp(1.05rem,1.3vw,1.22rem);
  line-height:1.8;
 }
}
@media(min-width:768px) and (max-width:991px){
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story{
  max-width:none;width:100%;box-sizing:border-box;
  padding:32px 24px 40px;gap:28px;
  grid-template-columns:minmax(0,54%) minmax(0,1fr);
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story>img{
  height:350px;object-fit:cover;
 }
}
@media(max-width:767px){
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story{
  width:100%;max-width:none;box-sizing:border-box;
  padding:26px 16px 34px;gap:22px;
 }
 .mtb-about-hub:not(.mtb-about-detail) .mtb-about-hub__story>img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
 }
}

/* Align ONLY the two top About landing images with the page edges.
   The article tiles below, detail pages, and shared site layout are untouched. */
.mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__cover {
  display:flex;
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:0;
  border-radius:0;
}
.mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story {
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-left:0;
  padding-right:0;
}
.mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story > img {
  display:block;
  width:100%;
  margin:0;
  border-radius:0;
}
@media (min-width:768px) {
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story > div {
    min-width:0;
    padding-right:clamp(20px,3vw,54px);
  }
}
@media (max-width:767px) {
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story {
    padding:26px 0 34px;
    gap:18px;
  }
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story > div {
    padding:0 16px;
  }
}

/* About landing only: top cover and story extend to the viewport right edge,
   even when a containing wrapper is narrower than the screen. */
.mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__cover,
.mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story {
  width: 100vw;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__cover {
    padding-left: 0;
    padding-right: 0;
  }
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story {
    padding: 26px 0 34px;
    gap: 18px;
  }
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story > img {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__story > div,
  .mtb-about-hub:not(.mtb-about-detail) > .mtb-about-hub__cover .mtb-about-hub__cover-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Tablet right-gutter regression: fix the About landing page's root box,
   rather than expanding photos beyond the layout viewport with 100vw. */
@media (max-width: 1199px) {
  body.mtb-about-landing {
    margin: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.mtb-about-landing .mtb-topbar,
  body.mtb-about-landing .mtb-navbar,
  body.mtb-about-landing > .mtb-about-hub {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover,
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Desktop editorial rhythm for About landing (only >= 1200px).
   Use the document's content width rather than 100vw to avoid scrollbar overflow.
   Tablet/mobile styling and About detail pages stay unchanged. */
@media (min-width: 1200px) {
  body.mtb-about-landing > .mtb-about-hub {
    width: 100%;
    max-width: 100%;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover {
    width: 100%;
    max-width: 100%;
    height: clamp(440px, 30vw, 530px);
    min-height: 0;
    margin: 0;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 55%) minmax(0, 1fr);
    gap: clamp(32px, 3.2vw, 58px);
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 28px 0 38px;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story > img {
    display: block;
    width: 100%;
    height: clamp(400px, 29vw, 490px);
    object-fit: cover;
    object-position: center 50%;
    border-radius: 0;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story > div {
    box-sizing: border-box;
    min-width: 0;
    max-width: 560px;
    padding: 0 clamp(28px, 3.2vw, 62px) 0 0;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story h2 {
    font-size: clamp(2.35rem, 2.85vw, 3.2rem);
    line-height: 1.2;
    margin: 12px 0 16px;
    text-wrap: balance;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__story p {
    max-width: 480px;
    font-size: clamp(1rem, 1.17vw, 1.17rem);
    line-height: 1.72;
    margin-bottom: 16px;
  }
}

/* About landing: widen only the four editorial cards on desktop.
   Retain comfortable page margins and the existing two-column design. */
@media (min-width: 1200px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cards {
    width: calc(100% - 2 * clamp(24px, 4vw, 80px));
    max-width: 1600px;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(22px, 2vw, 32px);
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cards
  .mtb-about-hub__card img {
    height: clamp(240px, 17vw, 300px);
  }
}

/* About hero typography & composition matched to the supplied reference.
   Keep the same cover photo and only adjust the opening hero; not story/cards. */
body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
.mtb-about-hub__cover-content {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
  margin: 0;
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}
body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1,
body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover p {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.018em;
}
@media (min-width: 992px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover {
    height: clamp(370px, 30.5vw, 535px);
    min-height: 0;
    aspect-ratio: auto;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-content {
    padding: 28px clamp(34px, 6vw, 112px);
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1 {
    max-width: 53%;
    margin: 0 0 12px;
    font-size: clamp(2.65rem, 3.35vw, 3.85rem);
    line-height: 1.17;
    white-space: normal;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-quote {
    max-width: 47%;
    margin: 0 0 10px;
    font-size: clamp(1.18rem, 1.45vw, 1.5rem);
    line-height: 1.5;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-lead {
    max-width: 43%;
    margin: 0;
    font-size: clamp(.88rem, 1.03vw, 1.08rem);
    line-height: 1.65;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-image {
    object-fit: cover;
    object-position: center 53%;
  }
  /* Reference artwork has its own white fade on the left. */
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-shade {
    background: transparent;
  }
}
/* Maintain the same type treatment at tablet sizes without changing its layout. */
@media (min-width: 768px) and (max-width: 991px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-content {
    padding: 22px 4.8%;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1 {
    max-width: 55%;
    font-size: clamp(2.1rem, 3.8vw, 2.85rem);
    margin: 0 0 9px;
    white-space: normal;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-quote {
    max-width: 48%;
    font-size: 1.05rem;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-lead {
    max-width: 46%;
    font-size: .88rem;
  }
}
/* Mobile retains the previously approved text-left/photo-right composition. */
@media (max-width: 767px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1 {
    letter-spacing: -0.025em;
  }
}

/* Keep longer translated titles within the light left-hand area. */
@media (min-width: 992px) {
  html[lang]:not([lang="vi"]) body.mtb-about-landing > .mtb-about-hub
  > .mtb-about-hub__cover h1 {
    max-width: 46%;
    font-size: clamp(2.15rem, 2.7vw, 3.15rem);
    overflow-wrap: break-word;
  }
}

/* Keep the four About landing article cards in a 2x2 grid on phones/tablets.
   Override the original <=991px one-column fallback only for this section. */
@media (max-width: 991px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 clamp(10px, 2.5vw, 22px) 44px;
    gap: clamp(10px, 2.1vw, 20px);
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card {
    min-width: 0;
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card div {
    padding: clamp(10px, 1.8vw, 16px);
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card h2 {
    font-size: clamp(1rem, 2.3vw, 1.35rem);
    line-height: 1.3;
    margin: 0 0 8px;
    overflow-wrap: break-word;
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card p {
    font-size: clamp(.79rem, 1.7vw, .96rem);
    line-height: 1.5;
    margin: 0 0 10px;
  }

  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card span {
    font-size: clamp(.77rem, 1.7vw, .9rem);
  }
}

@media (max-width: 400px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cards {
    padding-left: 8px;
    padding-right: 8px;
    gap: 8px;
  }
  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card div {
    padding: 9px;
  }
  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card h2 {
    font-size: .96rem;
  }
  body.mtb-about-landing .mtb-about-hub__cards .mtb-about-hub__card p {
    font-size: .77rem;
  }
}

/* Core About mobile grid: do not depend on a body class supplied by a
   potentially stale shared header. This is the only .mtb-about-hub__cards
   section in the site, so the rule stays limited to four article cards. */
@media (max-width: 991px) {
  .mtb-about-hub > .mtb-about-hub__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 20px);
  }
  .mtb-about-hub > .mtb-about-hub__cards > .mtb-about-hub__card {
    display: block;
    min-width: 0;
  }
  .mtb-about-hub > .mtb-about-hub__cards > .mtb-about-hub__card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
  }
}

/* Mobile hero readability: use a genuinely light copy area, and keep text
   inside that area rather than laying sentences across the lotus and tea. */
@media (max-width: 767px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover {
    display: flex;
    align-items: center;
    min-height: 305px;
    height: auto;
    overflow: hidden;
    isolation: isolate;
    background: #fffcf7;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    z-index: -2;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-shade {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      #fffcf7 0%,
      rgba(255,252,247,.99) 43%,
      rgba(255,252,247,.98) 57%,
      rgba(255,252,247,.88) 66%,
      rgba(255,252,247,.26) 84%,
      rgba(255,252,247,0) 100%);
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__cover-content {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 22px 16px;
    margin: 0;
    text-align: left;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1 {
    max-width: 59%;
    margin: 0 0 11px;
    font-size: clamp(1.3rem, 5.3vw, 1.65rem);
    line-height: 1.19;
    font-weight: 600;
    letter-spacing: -.025em;
    white-space: normal;
    overflow-wrap: break-word;
    color: #14251d;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-quote {
    max-width: 59%;
    margin: 0 0 10px;
    font-size: clamp(.9rem, 3.6vw, 1.03rem);
    line-height: 1.43;
    font-weight: 500;
    letter-spacing: 0;
    color: #23392e;
  }

  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-lead {
    max-width: 59%;
    margin: 0;
    font-size: clamp(.78rem, 3vw, .91rem);
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 500;
    color: #35483d;
  }
}

@media (max-width: 359px) {
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover {
    min-height: 325px;
  }
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover h1,
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-quote,
  body.mtb-about-landing > .mtb-about-hub > .mtb-about-hub__cover
  .mtb-about-hub__intro-lead {
    max-width: 61%;
  }
}