/* =========================================================
   ABOUT US PAGE - LITTLE HOI AN GROUP
   Scoped classes only. Does not affect unrelated sections.
========================================================= */

:root{
  --about-bg:#f7f3ee;
  --about-bg-soft:#f1ebe3;
  --about-text:#332d27;
  --about-muted:#5f574f;
  --about-red:#9a2a1f;
  --about-gold:#b7925a;
  --about-cream:#fbf4ea;
  --about-width:min(1250px,74vw);
  --about-ease:cubic-bezier(.22,1,.36,1);
}

.about-container{
  width:var(--about-width);
  max-width:var(--about-width);
  margin-left:auto;
  margin-right:auto;
}

.about-hero{
  position:relative;
  min-height:76vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  background:#111;
}

.about-hero-media,
.about-hero-video,
.about-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.about-hero-video,
.about-hero-media img{
  display:block;
  object-fit:cover;
}

.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(20,10,8,.22), rgba(20,10,8,.04) 44%, rgba(20,10,8,.26)),
    linear-gradient(90deg, rgba(92,54,26,.18), rgba(92,54,26,.03) 56%, rgba(92,54,26,.14));
}

.about-hero-content{
  position:relative;
  z-index:2;
  width:min(760px,calc(100% - 48px));
  padding-top:92px;
  text-align:center;
}

.about-hero-content span,
.about-kicker{
  display:block;
  margin:0 0 16px;
  color:var(--about-red);
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.about-hero-content h1,
.about-intro-copy h2,
.about-people-heading h2,
.about-principles-title h2,
.about-faifo-content h2{
  margin:0;
  color:var(--about-text);
  font-family:"Americana", "Playfair Display", Georgia, serif;
  font-weight:400;
  letter-spacing:.003em;
}

.about-hero-content h1{
  color:var(--about-cream);
  font-size:42px;
  line-height:1.05;
  text-shadow:0 10px 28px rgba(0,0,0,.20);
}

.about-hero-content p{
  width:min(560px,100%);
  margin:22px auto 0;
  color:rgba(255,255,255,.96);
  font-size:15px;
  line-height:1.85;
  font-weight:400;
  text-shadow:0 3px 16px rgba(0,0,0,.18);
}

.about-intro,
.about-people,
.about-principles,
.about-quote{
  background:var(--about-bg);
}

.about-intro{
  padding:108px 0 92px;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:45% 55%;
  gap:64px;
  align-items:center;
}

.about-intro-images{
  position:relative;
  min-height:390px;
}

.about-intro-img{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#d8d0c6;
  box-shadow:0 24px 60px rgba(33,26,20,.12);
}

.about-intro-img img,
.about-philosophy-bg img,
.about-faifo-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-intro-img--large{
  top:0;
  left:42px;
  width:66%;
  height:330px;
}

.about-intro-img--small{
  right:0;
  bottom:0;
  width:48%;
  height:265px;
  filter:grayscale(1);
}

.about-intro-copy{
  max-width:570px;
}

.about-intro-copy h2,
.about-people-heading h2,
.about-principles-title h2,
.about-faifo-content h2{
  font-size:34px;
  line-height:1.16;
}

.about-intro-copy p,
.about-people-copy p,
.about-principles-list p,
.about-faifo-content p,
.about-philosophy-card p{
  margin:0 0 18px;
  color:var(--about-muted);
  font-size:15px;
  line-height:1.86;
  font-weight:400;
  letter-spacing:.002em;
}

.about-intro-copy h2 + p{
  margin-top:28px;
}

.about-intro-copy p:last-child,
.about-people-copy p:last-child,
.about-faifo-content p:last-child,
.about-philosophy-card p:last-child{
  margin-bottom:0;
}

.about-philosophy{
  position:relative;
  padding:112px 0;
  overflow:hidden;
  color:#fff;
  background:#1a1512;
}

.about-philosophy-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.about-philosophy-bg::after{
  content:none;
}

.about-philosophy-bg img{
  filter:none;
  transform:scale(1.02);
}

.about-philosophy-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}

.about-philosophy-card{
  min-height:310px;
  padding:34px 30px 32px;
  border:none;
  background:rgba(115, 34, 28, .72);
  backdrop-filter:blur(4px);
  box-shadow:0 24px 60px rgba(40, 12, 10, .16);
}

.about-philosophy-card span{
  display:block;
  margin-bottom:38px;
  color:rgba(244,226,188,.78);
  font-size:12px;
  font-weight:600;
  letter-spacing:.28em;
}

.about-philosophy-card h3,
.about-principles-list h3{
  margin:0 0 20px;
  font-family:"Americana", "Playfair Display", Georgia, serif;
  font-size:27px;
  line-height:1.12;
  font-weight:400;
  letter-spacing:.005em;
}

.about-philosophy-card h3{
  color:#f3e2bf;
}

.about-philosophy-card p{
  color:rgba(250,241,224,.95);
  font-size:14px;
  line-height:1.82;
  text-shadow:none;
}

.about-people{
  padding:96px 0 90px;
}

.about-people-grid{
  display:grid;
  grid-template-columns:42% 58%;
  gap:72px;
  align-items:start;
}

.about-people-copy{
  padding-top:42px;
  column-count:2;
  column-gap:46px;
}

.about-principles{
  padding:98px 0 106px;
  background:var(--about-bg-soft);
}

.about-principles-title{
  width:min(560px,100%);
  margin-bottom:42px;
}

.about-principles-list{
  border-top:1px solid rgba(55,49,42,.22);
}

.about-principles-list article{
  display:grid;
  grid-template-columns:34% 66%;
  gap:42px;
  padding:30px 0;
  border-bottom:1px solid rgba(55,49,42,.22);
}

.about-principles-list h3{
  color:var(--about-text);
  font-size:30px;
}

.about-principles-list p{
  max-width:650px;
  margin-bottom:0;
}

.about-faifo{
  position:relative;
  min-height:570px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:#fff;
  background:#111;
}

.about-faifo-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.about-faifo-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(34,22,16,.20), rgba(34,22,16,.02) 45%, rgba(34,22,16,.14)),
    linear-gradient(180deg, rgba(255,244,232,.04), rgba(0,0,0,.20));
}

.about-faifo-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:48% 52%;
  gap:72px;
  padding:0 0 92px;
}

.about-faifo-content h2,
.about-faifo-content p{
  color:#fff;
}

.about-faifo-content > div{
  padding:26px 28px;
  background:rgba(40,26,18,.14);
  backdrop-filter:blur(2px);
}

.about-faifo-content p{
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}

.about-faifo-content h2{
  text-shadow:0 4px 18px rgba(0,0,0,.16);
}

.about-quote{
  padding:78px 24px 86px;
  text-align:center;
}

.about-quote-inner{
  width:min(940px,100%);
  margin:0 auto;
}

.about-quote p{
  margin:0;
  color:#2f2b26;
  font-family:"Americana", "Playfair Display", Georgia, serif;
  font-size:31px;
  line-height:1.32;
  font-weight:400;
  letter-spacing:.003em;
}

.about-fadein-up{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity 1.15s var(--about-ease), transform 1.15s var(--about-ease);
  will-change:opacity, transform;
}

.about-fadein-up.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

@media(max-width:1320px){
  :root{ --about-width:min(1120px,82vw); }
}

@media(max-width:980px){
  :root{ --about-width:min(760px,88vw); }

  .about-hero{ min-height:68vh; }
  .about-hero-content h1{ font-size:38px; }

  .about-intro{ padding:82px 0 74px; }
  .about-intro-grid,
  .about-people-grid,
  .about-faifo-content{
    grid-template-columns:1fr;
    gap:52px;
  }

  .about-intro-images{
    width:min(520px,100%);
    margin:0 auto;
  }

  .about-intro-copy,
  .about-people-heading,
  .about-principles-title{
    text-align:center;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .about-philosophy{ padding:82px 0; }
  .about-philosophy-grid{ grid-template-columns:1fr; }
  .about-philosophy-card{ min-height:auto; }

  .about-people{ padding:78px 0; }
  .about-people-copy{
    padding-top:0;
    column-count:1;
    text-align:center;
  }

  .about-principles{ padding:80px 0 88px; }
  .about-principles-list article{
    grid-template-columns:1fr;
    gap:14px;
    text-align:center;
  }

  .about-principles-list p{
    margin-left:auto;
    margin-right:auto;
  }

  .about-faifo{ min-height:620px; }
  .about-faifo-content{
    padding-bottom:74px;
    text-align:center;
  }

  .about-quote p{ font-size:27px; }
}

@media(max-width:560px){
  :root{ --about-width:100%; }

  .about-container{
    width:100%;
    max-width:100%;
    padding-left:22px;
    padding-right:22px;
    box-sizing:border-box;
  }

  .about-hero{ min-height:62vh; }
  .about-hero-content{ padding-top:72px; }
  .about-hero-content h1{ font-size:34px; }
  .about-hero-content p{ font-size:14px; line-height:1.75; }

  .about-intro{ padding:64px 0 58px; }
  .about-intro-images{ min-height:310px; }
  .about-intro-img--large{ left:0; width:66%; height:255px; }
  .about-intro-img--small{ width:54%; height:220px; }

  .about-intro-copy h2,
  .about-people-heading h2,
  .about-principles-title h2,
  .about-faifo-content h2{
    font-size:29px;
    line-height:1.16;
  }

  .about-intro-copy p,
  .about-people-copy p,
  .about-principles-list p,
  .about-faifo-content p,
  .about-philosophy-card p{
    font-size:14px;
    line-height:1.82;
  }

  .about-philosophy{ padding:62px 0; }
  .about-philosophy-card{ padding:28px 24px; }
  .about-philosophy-card h3,
  .about-principles-list h3{ font-size:25px; }

  .about-people{ padding:62px 0; }
  .about-principles{ padding:64px 0 70px; }
  .about-principles-list article{ padding:26px 0; }

  .about-faifo{ min-height:660px; }
  .about-faifo-content{ padding-bottom:58px; }

  .about-quote{ padding:62px 22px 68px; }
  .about-quote p{ font-size:24px; line-height:1.36; }
}

@media(prefers-reduced-motion:reduce){
  .about-fadein-up{
    opacity:1;
    transform:none;
    transition:none;
  }
}


/* =========================================================
   RED / GOLD PHILOSOPHY VARIANT
   Original image preserved, no dark overlay on background.
========================================================= */
.about-philosophy-grid{
  gap:40px;
}

.about-philosophy-card h3,
.about-philosophy-card p,
.about-philosophy-card span{
  position:relative;
  z-index:1;
}

@media(max-width:560px){
  .about-philosophy-card{
    background:rgba(115, 34, 28, .78);
  }
}