/* =========================================================
   ABOUT PAGE - Lau-Tam Abogados
   File: css/about.css
   ========================================================= */

.about-page{
  background:#f4f1ec;
  color:#07192f;
}

.about-page main{
  min-height:100vh;
}


/* =========================================================
   HERO
   ========================================================= */

.about-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 24%, rgba(201,157,85,.11), transparent 30%),
    linear-gradient(135deg, #06111f 0%, #07182d 48%, #020913 100%);
  color:#fff;
}

.about-hero-pattern{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:78px 78px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.18));
}

.about-hero-inner{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1540px;
  margin-left:auto;
  margin-right:auto;
  padding-left:86px;
  padding-right:var(--page-pad, 48px);
  padding-bottom:76px;
  transform:translateY(1.8vh);
}

.about-kicker,
.about-section-label{
  margin:0 0 1.25rem;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#c99d55;
}

.about-title{
  max-width:920px;
  margin:0;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(3.2rem, 6.2vw, 6.8rem);
  line-height:.9;
  font-weight:500;
  letter-spacing:-.055em;
}

.about-hero-subtitle{
  max-width:720px;
  margin:1.45rem 0 0;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:clamp(1rem, 1.35vw, 1.18rem);
  line-height:1.72;
  font-weight:300;
  color:rgba(255,255,255,.80);
}

.about-scroll{
  display:none;
}


/* =========================================================
   HERO TABS
   ========================================================= */

.about-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:34px;
  margin-top:34px;
}

.about-tab{
  position:relative;
  display:inline-flex;
  align-items:center;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1rem;
  line-height:1;
  font-weight:600;
  letter-spacing:-.01em;
  transition:color .22s ease;
}

.about-tab::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-9px;
  width:0;
  height:1px;
  background:#c99d55;
  transition:width .22s ease;
}

.about-tab:hover,
.about-tab.active{
  color:#c99d55;
}

.about-tab:hover::after,
.about-tab.active::after{
  width:100%;
}


/* =========================================================
   HERO SIDE VIDEO - ABOUT
   ========================================================= */

.about-hero-side-video{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  width:58vw;
  height:100%;
  overflow:hidden;
  pointer-events:none;
  opacity:.74;
  mix-blend-mode:screen;
  mask-image:linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.10) 13%,
    rgba(0,0,0,.66) 43%,
    rgba(0,0,0,.98) 100%
  );
}

.about-hero-side-video::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(6,17,31,.84) 0%,
      rgba(6,17,31,.42) 34%,
      rgba(6,17,31,.08) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6,17,31,.06) 0%,
      rgba(6,17,31,0) 44%,
      rgba(2,9,19,.30) 100%
    );
}

.about-hero-side-video video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.18) contrast(1.28) brightness(1.14);
  transform:scale(1.06);
}


/* =========================================================
   WHITE CONTENT AREA
   ========================================================= */

.about-gateway{
  background:#f4f1ec;
  padding:118px 0 128px;
  color:#07192f;
}

.about-gateway-inner{
  width:min(1060px, calc(100% - 48px));
  margin:0 auto;
}

.about-panel{
  display:block;
}

.about-panel[hidden]{
  display:none!important;
}

.about-panel.active{
  display:block;
}


/* =========================================================
   OUR DNA PANEL
   ========================================================= */

.about-gateway-head{
  margin-bottom:34px;
}

.about-gateway-head h2{
  max-width:780px;
  margin:0;
  color:#07192f;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(2.4rem, 4vw, 4.8rem);
  line-height:.96;
  font-weight:500;
  letter-spacing:-.055em;
}

.about-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:
    "practice attorneys attorneys"
    "practice experience recognition"
    "contact contact contact";
  gap:18px;
}

.about-card{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  background:rgba(7,25,47,.045);
  border:1px solid rgba(7,25,47,.14);
  color:#07192f;
  text-decoration:none;
  text-align:center;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(1.35rem, 1.75vw, 2rem);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.025em;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.about-card:hover{
  transform:translateY(-3px);
  background:#07192f;
  border-color:#07192f;
  color:#fff;
  box-shadow:0 24px 60px rgba(7,25,47,.16);
}

.about-card-large{
  min-height:520px;
}

.about-card:nth-child(1){
  grid-area:practice;
}

.about-card:nth-child(2){
  grid-area:attorneys;
}

.about-card:nth-child(3){
  grid-area:experience;
}

.about-card:nth-child(4){
  grid-area:recognition;
}

.about-card:nth-child(5){
  grid-area:contact;
  min-height:220px;
}


/* =========================================================
   RECOGNITION PREVIEW INSIDE ABOUT
   Full recognition page belongs in recognition.html.
   ========================================================= */

.about-recognition-preview{
  margin-top:0;
  padding:0;
}

.about-recognition-preview-inner{
  max-width:820px;
  padding:54px 0 0;
  border-top:2px solid rgba(7,25,47,.92);
}

.about-recognition-preview h2{
  max-width:720px;
  margin:0;
  color:#07192f;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(2.35rem, 3.55vw, 4.15rem);
  line-height:.96;
  font-weight:500;
  letter-spacing:-.05em;
}

.about-recognition-preview-copy{
  max-width:680px;
  margin:24px 0 0;
  color:rgba(7,25,47,.68);
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1rem;
  line-height:1.65;
  font-weight:300;
}


/* =========================================================
   LANGUAGE VISIBILITY FALLBACK
   ========================================================= */

html[lang="es"] [data-i18n]:not([data-i18n="es"]),
html[lang="en"] [data-i18n]:not([data-i18n="en"]),
html[lang="zh"] [data-i18n]:not([data-i18n="zh"]){
  display:none!important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1180px){
  .about-hero-inner{
    width:min(100% - 34px, 760px);
    max-width:760px;
    padding-left:0;
    padding-right:0;
    transform:translateY(.8vh);
  }

  .about-title{
    max-width:760px;
    font-size:clamp(3rem, 9.8vw, 5.2rem);
    line-height:.94;
  }

  .about-hero-side-video{
    width:48vw;
    opacity:.48;
  }
}

@media(max-width:980px){
  .about-gateway-inner{
    width:min(100% - 34px, 760px);
  }

  .about-card-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "practice practice"
      "attorneys experience"
      "recognition contact";
  }

  .about-card,
  .about-card-large,
  .about-card:nth-child(5){
    min-height:190px;
  }
}

@media(max-width:760px){
  .about-hero-side-video{
    display:none;
  }

  .about-tabs{
    gap:24px;
    margin-top:30px;
  }

  .about-tab{
    font-size:.96rem;
  }

  .about-recognition-head{
    display:block;
    margin-bottom:34px;
  }

  .about-recognition-link{
    margin-top:26px;
  }

  .about-recognition-preview-row{
    grid-template-columns:32px minmax(0,1fr) 70px;
    gap:18px;
    min-height:auto;
    padding:24px 0;
  }

  .about-recognition-preview-row:hover{
    padding-left:0;
  }

  .about-recognition-year{
    font-size:.92rem;
  }
}

@media(max-width:640px){
  .about-hero{
    min-height:100svh;
  }

  .about-hero-inner{
    width:calc(100% - 28px);
    padding-left:0;
    padding-right:0;
    padding-bottom:72px;
    transform:translateY(0);
  }

  .about-title{
    font-size:clamp(3rem, 13vw, 4.85rem);
    line-height:.93;
    letter-spacing:-.05em;
  }

  .about-hero-subtitle{
    max-width:100%;
    margin-top:22px;
    font-size:1rem;
    line-height:1.65;
  }

  .about-recognition-preview h2{
    font-size:clamp(2.25rem, 10.5vw, 3.25rem);
    line-height:.98;
  }

  .about-gateway{
    padding:68px 0;
  }

  .about-gateway-inner{
    width:calc(100% - 28px);
  }

  .about-card-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "practice"
      "attorneys"
      "experience"
      "recognition"
      "contact";
    gap:12px;
  }

  .about-card,
  .about-card-large,
  .about-card:nth-child(5){
    min-height:150px;
    padding:26px;
  }

  .about-recognition-preview-row{
    grid-template-columns:28px minmax(0,1fr);
  }

  .about-recognition-year{
    grid-column:2;
    justify-self:start;
    opacity:.76;
  }
}

/* =========================================================
   ABOUT WHITE SECTION NAV - VASIL STYLE
   ========================================================= */

.about-section-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:34px;
  margin:0 0 78px;
}

.about-section-nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  color:#07192f;
  text-decoration:none;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1rem;
  line-height:1;
  font-weight:600;
  letter-spacing:-.01em;
  transition:color .22s ease;
}

.about-section-nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:1px;
  background:#c99d55;
  transition:width .22s ease;
}

.about-section-nav-link:hover,
.about-section-nav-link.active{
  color:#c99d55;
}

.about-section-nav-link:hover::after,
.about-section-nav-link.active::after{
  width:100%;
}

.about-section-nav-link.is-pending{
  cursor:default;
}

.about-section-nav-link.is-pending:hover{
  color:#07192f;
}

.about-section-nav-link.is-pending:hover::after{
  width:0;
}

@media(max-width:760px){
  .about-section-nav{
    gap:24px;
    margin-bottom:52px;
  }

  .about-section-nav-link{
    font-size:.96rem;
  }
}

@media(max-width:640px){
  .about-section-nav{
    gap:20px 22px;
    margin-bottom:42px;
  }
}

/* =========================================================
   RECOGNITION PANEL INSIDE ABOUT
   Hero remains fixed. Only the white area changes.
   ========================================================= */

.recognition-ranking-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:end;
  gap:32px;
  margin:28px 0 42px;
}

.recognition-heading-copy{
  min-width:0;
}


.recognition-section-label{
  margin:0;
  color:#07192f;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.88rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.recognition-year-switcher{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  min-width:150px;
  font-family:var(--fg, "Georama", sans-serif);
  color:#07192f;
}

.recognition-year-arrow,
.recognition-year-current{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0;
}

.recognition-year-arrow{
  width:22px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  line-height:1;
  font-weight:300;
  opacity:.45;
  transition:opacity .2s ease, transform .2s ease;
}

.recognition-year-arrow:hover{
  opacity:1;
  transform:translateY(-1px);
}

.recognition-year-current{
  min-width:52px;
  text-align:center;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.02em;
}

.recognition-table{
  border-top:2px solid #171717;
}

.recognition-row{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) 130px;
  align-items:center;
  column-gap:34px;
  min-height:104px;
  padding:28px 58px;
  border-bottom:2px solid #171717;
  color:#171717;
  background:transparent;
  transition:
    background .24s ease,
    color .24s ease,
    padding-left .24s ease,
    border-color .24s ease;
}

.recognition-row::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:0;
  background:#171717;
  pointer-events:none;
  transition:height .22s ease;
}

.recognition-row:hover::after{
  height:12px;
}

.recognition-row.is-open{
  align-items:start;
  background:#171717;
  color:#fff;
  padding-top:32px;
  padding-bottom:58px;
  border-color:#171717;
}

.recognition-row.is-open::after{
  height:0;
}

.recognition-row.is-hidden{
  display:none;
}

.recognition-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1.8rem;
  line-height:1;
  font-weight:600;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-1px);
}

.recognition-main h2{
  margin:0;
  color:inherit;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:clamp(1.12rem, 1.45vw, 1.38rem);
  line-height:1.26;
  font-weight:700;
  letter-spacing:-.018em;
}

.recognition-year{
  justify-self:start;
  color:inherit;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:clamp(1.12rem, 1.35vw, 1.32rem);
  line-height:1;
  font-weight:600;
  letter-spacing:.01em;
}

.recognition-detail{
  display:none;
  max-width:650px;
  margin:70px 0 0 116px;
}

.recognition-detail p{
  margin:0;
  color:#fff;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1.08rem;
  line-height:1.45;
  font-weight:700;
  letter-spacing:-.018em;
}

.recognition-row.is-open .recognition-detail{
  display:block;
}

@media(max-width:980px){
  .recognition-row{
    grid-template-columns:32px minmax(0, 1fr) 82px;
    gap:22px;
    padding:26px 22px;
  }

  .recognition-row:hover::after{
    height:8px;
  }

  .recognition-row.is-open{
    padding-bottom:44px;
  }

  .recognition-detail{
    margin:44px 0 0 0;
  }
}

@media(max-width:760px){
  .recognition-ranking-head{
    gap:22px;
  }

  .recognition-year-switcher{
    min-width:124px;
    gap:14px;
  }
}

@media(max-width:640px){
  .recognition-ranking-head{
    align-items:flex-start;
  }

  .recognition-row{
    grid-template-columns:28px minmax(0, 1fr);
    gap:18px;
    min-height:auto;
    padding:24px 0;
  }

  .recognition-row:hover::after{
    height:0;
  }

  .recognition-row.is-open{
    padding:26px 18px 38px;
  }

  .recognition-year{
    grid-column:2;
    justify-self:start;
    font-size:.96rem;
    opacity:.72;
  }

  .recognition-main h2{
    font-size:1.05rem;
  }

  .recognition-detail{
    margin:34px 0 0;
  }

  .recognition-detail p{
    font-size:1rem;
    line-height:1.48;
  }
}

/* =========================================================
   RECOGNITION - DIRECTORY GROUPS
   Only two visible blocks: IFLR1000 and Leaders League.
   ========================================================= */

.recognition-directory-list{
  border-top:2px solid #171717;
}

.recognition-directory-card{
  grid-template-columns:42px minmax(0, 1fr) 130px;
  min-height:118px;
}

.recognition-directory-meta{
  margin:0 0 10px;
  color:rgba(7,25,47,.58);
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.recognition-directory-card.is-open .recognition-directory-meta{
  color:rgba(255,255,255,.58);
}

.recognition-directory-card .recognition-main h2{
  font-size:clamp(1.45rem, 2vw, 2.05rem);
  line-height:1.08;
  letter-spacing:-.035em;
}

.recognition-directory-card.is-open{
  min-height:360px;
  padding-top:40px;
  padding-bottom:64px;
}

.recognition-directory-card .recognition-detail{
  max-width:760px;
  margin:58px 0 0 0;
}

.recognition-detail-list{
  list-style:none;
  margin:34px 0 0;
  padding:0;
  border-top:1px solid rgba(255,255,255,.22);
}

.recognition-detail-list li{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:28px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.98rem;
  line-height:1.35;
}

.recognition-detail-list strong{
  color:rgba(255,255,255,.74);
  font-size:.82rem;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media(max-width:980px){
  .recognition-directory-card .recognition-main h2{
    font-size:clamp(1.25rem, 3vw, 1.7rem);
  }

  .recognition-directory-card.is-open{
    min-height:330px;
  }
}

@media(max-width:640px){
  .recognition-directory-card{
    grid-template-columns:28px minmax(0, 1fr);
  }

  .recognition-directory-card .recognition-main h2{
    font-size:1.28rem;
    line-height:1.14;
  }

  .recognition-directory-card.is-open{
    min-height:auto;
  }

  .recognition-detail-list li{
    grid-template-columns:1fr;
    gap:8px;
  }

  .recognition-detail-list strong{
    white-space:normal;
  }
}

/* =========================================================
   RECOGNITION - FINAL LAYOUT FIXES
   ========================================================= */

.recognition-section-label{
  letter-spacing:.06em;
}

.recognition-year-switcher{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  min-width:156px;
  color:#07192f;
}

.recognition-year-arrow{
  appearance:none;
  border:0;
  background:transparent;
  color:#07192f;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  opacity:.72;
  transition:
    opacity .22s ease,
    transform .22s ease,
    color .22s ease;
}

.recognition-year-arrow svg{
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:2.4;
}

.recognition-year-arrow:hover{
  opacity:1;
  color:#c99d55;
  transform:translateY(-1px);
}

.recognition-year-arrow:active{
  transform:translateY(0) scale(.94);
}

.recognition-year-arrow:disabled{
  opacity:.24;
  cursor:default;
  pointer-events:none;
}

.recognition-year-arrow:disabled:hover{
  color:#07192f;
  transform:none;
}

.recognition-year-current-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:28px;
  overflow:hidden;
}

.recognition-year-current{
  display:inline-block;
  color:#07192f;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:1.02rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
  will-change:transform, opacity;
}

.recognition-year-current.is-enter-from-top{
  animation:recognitionYearFromTop .32s cubic-bezier(.22,.61,.36,1);
}

.recognition-year-current.is-enter-from-bottom{
  animation:recognitionYearFromBottom .32s cubic-bezier(.22,.61,.36,1);
}

@keyframes recognitionYearFromTop{
  0%{ transform:translateY(-110%); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

@keyframes recognitionYearFromBottom{
  0%{ transform:translateY(110%); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}

.recognition-section-separator{
  width:100%;
  height:1px;
  margin-top:72px;
  background:rgba(7,25,47,.10);
}

@media(max-width:760px){
  .recognition-year-switcher{
    min-width:136px;
    gap:12px;
  }

  .recognition-year-arrow{
    width:30px;
    height:30px;
  }
}

/* =========================================================
   RECOGNITION FINAL REFINEMENT - publication-year structure
   ========================================================= */

.recognition-table{
  border-top:2px solid rgba(7,25,47,.92);
}

.recognition-row{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 120px;
  align-items:center;
  gap:34px;
  min-height:104px;
  padding:28px 48px;
  border-bottom:2px solid rgba(7,25,47,.92);
  color:#07192f;
  background:transparent;
  overflow:hidden;
  transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.recognition-row::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:0;
  background:#07192f;
  z-index:0;
  transition:height .28s cubic-bezier(.22,.61,.36,1);
}

.recognition-row::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:0;
  background:#c99d55;
  z-index:1;
  transition:height .28s ease;
}

.recognition-toggle,
.recognition-main,
.recognition-year{
  position:relative;
  z-index:2;
}

.recognition-row:hover{
  color:#fff;
  border-color:#07192f;
  box-shadow:0 18px 48px rgba(7,25,47,.10);
}

.recognition-row:hover::before,
.recognition-row:hover::after,
.recognition-row.is-open::before,
.recognition-row.is-open::after{
  height:100%;
}

.recognition-main{
  transition:transform .28s ease;
}

.recognition-row:hover .recognition-main{
  transform:translateX(6px);
}

.recognition-toggle{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:1.65rem;
  line-height:1;
  font-weight:700;
  transition:transform .25s ease,color .25s ease;
}

.recognition-row:hover .recognition-toggle{
  color:#c99d55;
  transform:rotate(90deg);
}

.recognition-main h2,
.recognition-main h3{
  margin:0;
  color:inherit;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:clamp(1.05rem,1.45vw,1.35rem);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.015em;
}

.recognition-directory-meta{
  margin:0 0 10px;
  color:#c99d55;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:color .25s ease,opacity .25s ease;
}

.recognition-row:hover .recognition-directory-meta,
.recognition-row.is-open .recognition-directory-meta{
  color:#c99d55;
  opacity:1;
}

.recognition-year{
  justify-self:start;
  color:inherit;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:1.08rem;
  line-height:1;
  font-weight:800;
}

.recognition-row.is-open{
  align-items:flex-start;
  min-height:270px;
  padding-top:34px;
  padding-bottom:44px;
  color:#fff;
  background:#07192f;
  border-color:#07192f;
  box-shadow:0 26px 70px rgba(7,25,47,.18);
}

.recognition-row.is-open .recognition-toggle{
  color:#c99d55;
  transform:rotate(0deg);
}

.recognition-detail{
  display:none;
  max-width:780px;
  margin-top:38px;
  color:rgba(255,255,255,.84);
  font-family:var(--fg,"Georama",sans-serif);
  font-size:1rem;
  line-height:1.65;
  font-weight:400;
}

.recognition-row.is-open .recognition-detail{
  display:block;
  animation:recognitionDetailIn .32s cubic-bezier(.22,.61,.36,1);
}

@keyframes recognitionDetailIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

.recognition-detail-list{
  display:grid;
  gap:0;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.22);
}

.recognition-detail-list li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.18);
}

.recognition-detail-list span{
  color:#fff;
  font-weight:700;
}

.recognition-detail-list strong{
  color:rgba(255,255,255,.72);
  font-weight:700;
  white-space:nowrap;
}

.recognition-publication-date{
  margin:24px 0 0!important;
  color:rgba(255,255,255,.58)!important;
  font-size:.82rem!important;
  line-height:1.4!important;
}

.recognition-row.is-hidden{
  display:none!important;
}

.recognition-section-separator{
  width:100%;
  height:1px;
  margin-top:72px;
  background:rgba(7,25,47,.10);
}

@media(max-width:760px){
  .recognition-row{
    grid-template-columns:32px minmax(0,1fr) 72px;
    gap:20px;
    padding:26px 20px;
  }
}

@media(max-width:640px){
  .recognition-row{
    grid-template-columns:30px minmax(0,1fr);
    gap:18px;
    padding:24px 0;
    min-height:auto;
  }

  .recognition-row:hover .recognition-main{
    transform:none;
  }

  .recognition-year{
    grid-column:2;
    justify-self:start;
    opacity:.72;
    margin-top:4px;
  }

  .recognition-row.is-open{
    min-height:auto;
    padding:28px 22px 34px;
  }

  .recognition-detail{
    margin-top:28px;
    font-size:.96rem;
  }

  .recognition-detail-list li{
    grid-template-columns:1fr;
    gap:7px;
  }

  .recognition-detail-list strong{
    white-space:normal;
  }
}

/* =========================================================
   RECOGNITION FINAL OVERRIDES
   Publication year grouping + softer hover.
   ========================================================= */

.recognition-row:hover{
  color:#07192f;
  background:rgba(7,25,47,.035);
  border-color:#07192f;
  box-shadow:none;
}

.recognition-row:hover::before{
  height:0;
}

.recognition-row:hover::after{
  height:100%;
  background:#c99d55;
}

.recognition-row:hover .recognition-main{
  transform:translateX(4px);
}

.recognition-row:hover .recognition-toggle{
  color:#c99d55;
  transform:rotate(90deg);
}

.recognition-row:hover .recognition-directory-meta{
  color:#c99d55;
}

.recognition-row.is-open{
  color:#fff;
  background:#07192f;
  border-color:#07192f;
  box-shadow:0 22px 54px rgba(7,25,47,.14);
}

.recognition-row.is-open::before{
  height:100%;
}

.recognition-row.is-open::after{
  height:100%;
  background:#c99d55;
}

.recognition-row.is-open .recognition-toggle{
  color:#c99d55;
  transform:rotate(0deg);
}

.recognition-row.is-open .recognition-directory-meta{
  color:#c99d55;
}


/* =========================================================
   RECOGNITION RANKING LINKS + DETAIL COPY
   ========================================================= */

.recognition-detail-text{
  max-width:780px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-family:var(--fg,"Georama",sans-serif);
  font-size:1rem;
  line-height:1.65;
  font-weight:500;
}

.recognition-ranking-link{
  display:inline-flex;
  width:fit-content;
  margin-top:28px;
  color:#c99d55;
  text-decoration:none;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:.78rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(201,157,85,.65);
  padding-bottom:7px;
  transition:color .22s ease,border-color .22s ease,transform .22s ease;
}

.recognition-ranking-link:hover{
  color:#fff;
  border-color:#fff;
  transform:translateX(3px);
}

.recognition-publication-date{
  margin:24px 0 0!important;
  color:rgba(255,255,255,.54)!important;
  font-family:var(--fg,"Georama",sans-serif)!important;
  font-size:.82rem!important;
  line-height:1.4!important;
  font-weight:500!important;
}

@media(max-width:640px){
  .recognition-detail-text{
    font-size:.96rem;
    line-height:1.62;
  }

  .recognition-ranking-link{
    margin-top:24px;
  }
}


/* =========================================================
   RECOGNITION REFINEMENTS - softer hover + Lau-Tam open state
   ========================================================= */

.recognition-row{
  overflow:hidden;
}

.recognition-row:hover{
  color:#07192f;
  background:rgba(7,25,47,.035);
  border-color:#07192f;
  box-shadow:none;
}

.recognition-row:hover::after{
  height:0;
}

.recognition-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:0;
  background:#c99d55;
  pointer-events:none;
  transition:height .24s ease;
}

.recognition-row:hover::before,
.recognition-row.is-open::before{
  height:100%;
}

.recognition-row:hover .recognition-main{
  transform:translateX(4px);
}

.recognition-main{
  transition:transform .24s ease;
}

.recognition-row:hover .recognition-toggle{
  color:#c99d55;
  transform:translateY(-1px) rotate(90deg);
}

.recognition-row:hover .recognition-directory-meta{
  color:#c99d55;
}

.recognition-row.is-open{
  background:#07192f;
  color:#fff;
  border-color:#07192f;
  box-shadow:0 22px 54px rgba(7,25,47,.14);
}

.recognition-row.is-open .recognition-toggle{
  color:#c99d55;
  transform:translateY(-1px) rotate(0deg);
}

.recognition-row.is-open .recognition-main{
  transform:none;
}

.recognition-row.is-open .recognition-directory-meta{
  color:#c99d55;
}

.recognition-year-arrow:disabled{
  opacity:.25;
  cursor:default;
  pointer-events:none;
}

@media(max-width:760px){
  .recognition-ranking-head{
    align-items:start;
  }
}


/* =========================================================
   ABOUT / INTERNAL PAGES - FINAL SPLIT ARCHITECTURE
   About = DNA. Recognition and News are separate pages.
   Keep this block at the very end of css/about.css.
   ========================================================= */

.about-firm-intro{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:clamp(28px,5vw,72px);
  align-items:stretch;
  margin-top:clamp(28px,4vw,54px);
  margin-bottom:clamp(44px,6vw,82px);
}

.about-firm-copy{
  max-width:860px;
}

.about-firm-copy p{
  margin:0 0 18px;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.72;
  font-weight:300;
  color:rgba(10,23,40,.78);
}

.about-firm-copy p:last-child{
  margin-bottom:0;
}

.about-firm-statement{
  position:relative;
  min-height:360px;
  padding:clamp(28px,4vw,46px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:8px;
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(6,17,31,.97),rgba(7,39,67,.94)),
    radial-gradient(circle at 20% 15%,rgba(42,111,181,.45),transparent 36%);
  color:#fff;
}

.about-firm-statement::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.16);
  pointer-events:none;
}

.about-firm-statement::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  right:-90px;
  top:-70px;
  border-radius:50%;
  border:1px solid rgba(218,184,104,.32);
  pointer-events:none;
}

.about-firm-statement span{
  position:relative;
  z-index:1;
  display:block;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(34px,4.4vw,64px);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.045em;
}

.about-method{
  margin-bottom:clamp(46px,6vw,84px);
}

.about-method-head{
  margin-bottom:22px;
}

.about-method-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(6,17,31,.16);
  border-left:1px solid rgba(6,17,31,.16);
}

.about-method-item{
  min-height:260px;
  padding:clamp(22px,2.4vw,34px);
  border-right:1px solid rgba(6,17,31,.16);
  border-bottom:1px solid rgba(6,17,31,.16);
  background:rgba(255,255,255,.52);
  transition:background .22s ease,transform .22s ease;
}

.about-method-item:hover{
  background:rgba(255,255,255,.92);
  transform:translateY(-2px);
}

.about-method-item h3{
  margin:0 0 18px;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(22px,2vw,31px);
  line-height:1.05;
  font-weight:500;
  letter-spacing:-.035em;
  color:#06111f;
}

.about-method-item p{
  margin:0;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:14px;
  line-height:1.65;
  font-weight:300;
  color:rgba(10,23,40,.72);
}

/* Navigation is now real page navigation, not hash-panel navigation. */
.about-section-nav-link.is-pending,
.about-section-nav-link[aria-disabled="true"]{
  cursor:default;
  opacity:.72;
}

.about-section-nav-link.is-pending:hover,
.about-section-nav-link[aria-disabled="true"]:hover{
  color:#07192f;
}

.about-section-nav-link.is-pending:hover::after,
.about-section-nav-link[aria-disabled="true"]:hover::after{
  width:0;
}

@media(max-width:1080px){
  .about-firm-intro{
    grid-template-columns:1fr;
  }

  .about-firm-statement{
    min-height:280px;
  }

  .about-method-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:680px){
  .about-firm-intro{
    gap:28px;
    margin-top:24px;
    margin-bottom:48px;
  }

  .about-firm-copy p{
    font-size:15px;
    line-height:1.66;
  }

  .about-firm-statement{
    min-height:240px;
    padding:26px;
  }

  .about-method-grid{
    grid-template-columns:1fr;
  }

  .about-method-item{
    min-height:auto;
  }
}

/* =========================================================
   GLOBAL REVEAL ON SCROLL
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .78s cubic-bezier(.22,.61,.36,1),
    transform .78s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

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


/* =========================================================
   ABOUT HERO - SCROLL TO EXPLORE
   ========================================================= */

.about-scroll-explore{
  position:absolute;
  left:50%;
  bottom:34px;
  z-index:5;
  transform:translateX(-50%);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.74);
  text-decoration:none;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.68rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:
    color .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

.about-scroll-explore::before{
  content:"";
  width:1px;
  height:34px;
  margin-bottom:2px;
  background:linear-gradient(
    to bottom,
    rgba(201,157,85,0),
    rgba(201,157,85,.85)
  );
  opacity:.72;
}

.about-scroll-explore svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:aboutScrollArrow 1.65s ease-in-out infinite;
}

.about-scroll-explore:hover{
  color:#c99d55;
  transform:translateX(-50%) translateY(3px);
}

@keyframes aboutScrollArrow{
  0%,100%{
    transform:translateY(0);
    opacity:.72;
  }

  50%{
    transform:translateY(7px);
    opacity:1;
  }
}

@media(max-width:760px){
  .about-scroll-explore{
    bottom:24px;
    font-size:.62rem;
    letter-spacing:.16em;
  }

  .about-scroll-explore::before{
    height:26px;
  }

  .about-scroll-explore svg{
    width:23px;
    height:23px;
  }
}

@media(max-width:640px){
  .about-scroll-explore{
    bottom:20px;
  }
}

/* =========================================================
   ABOUT HERO TITLE SPLIT
   ========================================================= */

.about-title-split{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.04em;
  max-width:1040px;
}

.about-title-split .about-title-small{
  display:block;
  max-width:820px;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(2.35rem, 4.25vw, 4.9rem);
  line-height:.93;
  font-weight:500;
  letter-spacing:-.055em;
  color:rgba(255,255,255,.88);
}

.about-title-split .about-title-strong{
  display:block;
  max-width:1040px;
  font-family:var(--fd, "Playfair Display", serif);
  font-size:clamp(3.35rem, 6.45vw, 7.05rem);
  line-height:.88;
  font-weight:500;
  letter-spacing:-.058em;
  color:#fff;
}

@media(max-width:1180px){
  .about-title-split .about-title-small{
    font-size:clamp(2.25rem, 7.2vw, 4.2rem);
  }

  .about-title-split .about-title-strong{
    font-size:clamp(3rem, 9.8vw, 5.25rem);
  }
}

@media(max-width:640px){
  .about-title-split{
    gap:.08em;
  }

  .about-title-split .about-title-small{
    font-size:clamp(2.1rem, 9.5vw, 3.25rem);
    line-height:.96;
  }

  .about-title-split .about-title-strong{
    font-size:clamp(3rem, 13vw, 4.85rem);
    line-height:.93;
  }
}

/* =========================================================
   ABOUT GATEWAY TITLE - BALANCED MULTILINGUAL LINE BREAKS
   ========================================================= */

.about-gateway-title-balanced span{
  display:block;
}

.about-gateway-title-balanced{
  max-width:820px;
}

html[lang="zh"] .about-gateway-title-balanced{
  max-width:880px;
}

@media(max-width:760px){
  .about-gateway-title-balanced span{
    display:inline;
  }

  .about-gateway-title-balanced span::after{
    content:" ";
  }

  .about-gateway-title-balanced span:last-child::after{
    content:"";
  }
}

/* =========================================================
   ABOUT VALUES MARK - EDITORIAL FACT BLOCK
   ========================================================= */

.about-values-mark{
  position:relative;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:34px;
  padding:16px 0 0 clamp(28px,4vw,58px);
  color:#07192f;
}

.about-values-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:128px;
  background:#c99d55;
  transform:translateY(-50%);
}

.about-values-group{
  position:relative;
  margin:0;
  padding:0 0 0 28px;
}

.about-values-group::before{
  display:none;
}

.about-values-main{
  margin:0;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.78rem;
  line-height:1.15;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#07192f;
}

.about-values-main span{
  display:block;
}

.about-values-main span:last-child{
  margin-top:8px;
  font-family:var(--fd, "Playfair Display", serif);
  line-height:.96;
  font-weight:600;
  letter-spacing:-.044em;
  text-transform:none;
  color:#07192f;
}

/* Year must remain the dominant fact. */
.about-values-year .about-values-main span:last-child{
  font-size:clamp(2.25rem,3.1vw,3.35rem);
  line-height:.95;
}

/* Ranking line must be secondary and cleaner, especially in Spanish. */
.about-values-ranking .about-values-main span:last-child{
  font-size:clamp(1.75rem,2.25vw,2.45rem);
  line-height:1.02;
  max-width:260px;
}

html[lang="es"] .about-values-ranking .about-values-main span:last-child{
  font-size:clamp(1.55rem,1.85vw,2.05rem);
  line-height:1.04;
  max-width:250px;
}

html[lang="en"] .about-values-ranking .about-values-main span:last-child{
  font-size:clamp(1.85rem,2.4vw,2.6rem);
  max-width:260px;
}

html[lang="zh"] .about-values-main{
  letter-spacing:.12em;
}

html[lang="zh"] .about-values-main span:last-child{
  line-height:1.05;
  letter-spacing:-.025em;
}

html[lang="zh"] .about-values-year .about-values-main span:last-child{
  font-size:clamp(2.1rem,3vw,3.15rem);
}

html[lang="zh"] .about-values-ranking .about-values-main span:last-child{
  font-size:clamp(1.95rem,2.7vw,2.85rem);
}

@media(max-width:1080px){
  .about-values-mark{
    min-height:240px;
    padding-left:0;
    gap:28px;
  }

  .about-values-mark::before{
    height:112px;
  }
}

@media(max-width:680px){
  .about-values-mark{
    min-height:auto;
    gap:24px;
    padding:10px 0 0;
  }

  .about-values-mark::before{
    height:104px;
  }

  .about-values-group{
    padding-left:22px;
  }

  .about-values-year .about-values-main span:last-child{
    font-size:clamp(2rem,8vw,2.85rem);
  }

  .about-values-ranking .about-values-main span:last-child{
    font-size:clamp(1.65rem,6.6vw,2.25rem);
  }

  html[lang="es"] .about-values-ranking .about-values-main span:last-child{
    font-size:clamp(1.35rem,5.7vw,1.95rem);
  }
}

/* =========================================================
   ABOUT VALUES MARK - SPANISH RANKING LINE REFINEMENT
   ========================================================= */

html[lang="es"] .about-values-ranking .about-values-main span:last-child{
  margin-top:7px;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.78rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#07192f;
  max-width:300px;
}

/* =========================================================
   ABOUT VALUES MARK - ENGLISH AND CHINESE RANKING LINE REFINEMENT
   ========================================================= */

html[lang="en"] .about-values-ranking .about-values-main span:last-child,
html[lang="zh"] .about-values-ranking .about-values-main span:last-child{
  margin-top:7px;
  font-family:var(--fg, "Georama", sans-serif);
  font-size:.78rem;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#07192f;
  max-width:300px;
}

html[lang="zh"] .about-values-ranking .about-values-main span:last-child{
  letter-spacing:.12em;
}


/* =========================================================
   ABOUT FINAL MOBILE / PERFORMANCE HARDENING
   Mobile keeps the hero video visible using the lightweight file loaded by JS.
   ========================================================= */

.about-page{
  overflow-x:hidden;
}

.about-hero,
.about-gateway,
.about-gateway-inner,
.about-firm-intro,
.about-firm-copy,
.about-values-mark{
  max-width:100%;
}

.about-hero-side-video video{
  background:#06111f;
}

@media(max-width:760px){
  .about-hero-side-video{
    display:block;
    inset:0;
    width:100%;
    height:100%;
    opacity:.34;
    mix-blend-mode:screen;
    mask-image:none;
  }

  .about-hero-side-video::before{
    background:
      linear-gradient(90deg, rgba(6,17,31,.88) 0%, rgba(6,17,31,.72) 52%, rgba(6,17,31,.42) 100%),
      linear-gradient(180deg, rgba(6,17,31,.18) 0%, rgba(6,17,31,.08) 44%, rgba(2,9,19,.54) 100%);
  }

  .about-hero-side-video video{
    object-position:center center;
    filter:saturate(1.05) contrast(1.18) brightness(.88);
    transform:scale(1.04);
  }
}

@media(max-width:640px){
  .about-hero{
    min-height:100svh;
  }

  .about-hero-inner{
    width:calc(100% - 28px);
    padding-bottom:84px;
  }

  .about-title-split .about-title-small{
    font-size:clamp(2rem, 9vw, 3.1rem);
  }

  .about-title-split .about-title-strong{
    font-size:clamp(2.9rem, 12.8vw, 4.65rem);
  }

  .about-scroll-explore{
    bottom:22px;
  }

  .about-section-nav{
    overflow-x:auto;
    flex-wrap:nowrap;
    gap:22px;
    padding-bottom:8px;
    scrollbar-width:none;
  }

  .about-section-nav::-webkit-scrollbar{
    display:none;
  }

  .about-section-nav-link{
    flex:0 0 auto;
  }
}

@media(max-width:420px){
  .about-hero-inner{
    width:calc(100% - 24px);
  }

  .about-title-split .about-title-small{
    font-size:clamp(1.85rem, 8.5vw, 2.75rem);
  }

  .about-title-split .about-title-strong{
    font-size:clamp(2.65rem, 12.2vw, 4.2rem);
  }

  .about-hero-subtitle{
    font-size:.98rem;
  }
}



/* =========================================================
   ABOUT ETHOS - MISSION / VISION / PURPOSE
   Mosaic box layout inspired by the practice-area tiles.
   ========================================================= */

.about-ethos{
  margin:clamp(16px,3vw,34px) 0 0;
  padding:clamp(46px,6vw,78px) 0 0;
  border-top:1px solid rgba(7,25,47,.10);
}

.about-ethos-shell{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.38fr);
  gap:clamp(34px,5.4vw,82px);
  align-items:start;
}

.about-ethos-intro{
  position:sticky;
  top:96px;
  padding-top:8px;
}

.about-ethos-intro .about-section-label{
  margin-bottom:24px;
}

.about-ethos-intro h3{
  max-width:420px;
  margin:0;
  color:#07192f;
  font-family:var(--fd,"Playfair Display",serif);
  font-size:clamp(2.55rem,4.4vw,5rem);
  line-height:.94;
  font-weight:500;
  letter-spacing:-.058em;
}

.about-ethos-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:2px;
  background:rgba(7,25,47,.10);
  box-shadow:0 28px 80px rgba(7,25,47,.08);
}

.about-ethos-tile{
  position:relative;
  min-height:255px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(26px,3.2vw,38px);
  overflow:hidden;
  color:#07192f;
  background:#eef2f4;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.about-ethos-tile::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.78;
}

.about-ethos-tile > *{
  position:relative;
  z-index:1;
}

.about-ethos-tile-mission{
  grid-column:1 / span 3;
  grid-row:1;
  background:linear-gradient(135deg,#07192f 0%,#0d2c4b 100%);
  color:#fff;
}

.about-ethos-tile-vision{
  grid-column:4 / span 3;
  grid-row:1;
  background:linear-gradient(135deg,#dde9ec 0%,#b9dce0 100%);
}

.about-ethos-tile-purpose{
  grid-column:1 / -1;
  grid-row:2;
  min-height:205px;
  background:linear-gradient(135deg,#d8b96d 0%,#c99d55 100%);
}

.about-ethos-number{
  position:absolute;
  top:24px;
  left:clamp(26px,3.2vw,38px);
  color:currentColor;
  opacity:.48;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:.72rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.18em;
}

.about-ethos-tile h4{
  margin:0 0 18px;
  color:currentColor;
  font-family:var(--fd,"Playfair Display",serif);
  font-size:clamp(2rem,3vw,3.25rem);
  line-height:.98;
  font-weight:500;
  letter-spacing:-.052em;
}

.about-ethos-tile p{
  max-width:42ch;
  margin:0;
  color:currentColor;
  opacity:.78;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:clamp(14px,1.02vw,16px);
  line-height:1.62;
  font-weight:300;
}

.about-ethos-tile-mission p{
  opacity:.78;
}

.about-ethos-tile-purpose p{
  max-width:58ch;
  opacity:.82;
}

.about-ethos-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 58px rgba(7,25,47,.14);
  z-index:2;
}

html[lang="zh"] .about-ethos-tile p{
  line-height:1.76;
}

@media(max-width:1080px){
  .about-ethos-shell{
    grid-template-columns:1fr;
    gap:28px;
  }

  .about-ethos-intro{
    position:relative;
    top:auto;
  }

  .about-ethos-intro h3{
    max-width:760px;
  }
}

@media(max-width:760px){
  .about-ethos{
    padding-top:42px;
  }

  .about-ethos-grid{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:2px;
  }

  .about-ethos-tile,
  .about-ethos-tile-mission,
  .about-ethos-tile-vision,
  .about-ethos-tile-purpose{
    grid-column:auto;
    grid-row:auto;
    min-height:230px;
  }

  .about-ethos-tile-purpose{
    min-height:200px;
  }
}

@media(max-width:640px){
  .about-ethos{
    margin-top:2px;
    padding-top:34px;
  }

  .about-ethos-shell{
    gap:24px;
  }

  .about-ethos-intro .about-section-label{
    margin-bottom:18px;
  }

  .about-ethos-intro h3{
    font-size:clamp(2.35rem,11vw,3.55rem);
  }

  .about-ethos-tile{
    min-height:220px;
    padding:28px 24px 26px;
  }

  .about-ethos-number{
    top:24px;
    left:24px;
  }

  .about-ethos-tile h4{
    font-size:clamp(2rem,10vw,3rem);
  }

  .about-ethos-tile p{
    max-width:none;
    font-size:15px;
    line-height:1.62;
  }
}

@media(max-width:1100px){
  #team{
    padding-bottom:64px!important;
  }
}

@media(max-width:640px){
  #team{
    padding-bottom:52px!important;
  }
}


/* =========================================================
   ABOUT ETHOS - CLEAN MOSAIC REFINEMENT
   Removes decorative numbering and aligns Purpose as a full-width tile.
   ========================================================= */

.about-ethos-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;
}

.about-ethos-tile-mission{
  grid-column:1;
  grid-row:1;
}

.about-ethos-tile-vision{
  grid-column:2;
  grid-row:1;
}

.about-ethos-tile-purpose{
  grid-column:1 / -1;
  grid-row:2;
  min-height:205px;
}

.about-ethos-tile h4{
  margin-bottom:16px;
}

.about-ethos-tile-purpose h4{
  max-width:720px;
}

.about-ethos-tile-purpose p{
  max-width:68ch;
}

@media(max-width:760px){
  .about-ethos-grid{
    grid-template-columns:1fr;
  }

  .about-ethos-tile-mission,
  .about-ethos-tile-vision,
  .about-ethos-tile-purpose{
    grid-column:auto;
    grid-row:auto;
  }
}

/* =========================================================
   ABOUT SECTION LABELS - GRAY REFINEMENT
   Keeps internal section labels consistent with the rest of the site.
   ========================================================= */
.about-page .about-gateway .about-section-label,
.about-page .about-ethos-intro .about-section-label{
  color:rgba(7,25,47,.58)!important;
}

/* =========================================================
   ABOUT SPACING REFINEMENT - INTRO TO ETHOS
   Tightens the excessive vertical gap before the ethos mosaic.
   ========================================================= */
.about-firm-intro{
  margin-bottom:clamp(26px,3.4vw,44px)!important;
}

.about-values-mark{
  min-height:260px!important;
}

.about-ethos{
  margin-top:clamp(8px,1.4vw,18px)!important;
  padding-top:clamp(30px,3.8vw,48px)!important;
}

@media(max-width:1080px){
  .about-values-mark{
    min-height:210px!important;
  }
}

@media(max-width:680px){
  .about-firm-intro{
    margin-bottom:30px!important;
  }

  .about-values-mark{
    min-height:auto!important;
  }

  .about-ethos{
    margin-top:0!important;
    padding-top:30px!important;
  }
}

/* =========================================================
   ABOUT ETHOS - CENTERED MOSAIC REFINEMENT
   Removes the oversized side statement and lets the tile box lead.
   Keep at the end of css/about.css.
   ========================================================= */

.about-ethos{
  margin-top:clamp(10px,2vw,24px)!important;
  padding-top:clamp(34px,4.4vw,56px)!important;
}

.about-ethos-shell{
  display:block!important;
  max-width:1120px;
  margin:0 auto;
}

.about-ethos-intro{
  position:relative!important;
  top:auto!important;
  padding-top:0!important;
  margin:0 0 24px!important;
}

.about-ethos-intro .about-section-label{
  margin:0!important;
  color:rgba(7,25,47,.58)!important;
}

.about-ethos-intro h3{
  display:none!important;
}

.about-ethos-grid{
  width:min(880px,100%);
  margin:0 auto;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:2px!important;
  background:rgba(7,25,47,.08)!important;
  box-shadow:0 24px 70px rgba(7,25,47,.08)!important;
}

.about-ethos-tile{
  min-height:245px!important;
  padding:clamp(28px,3vw,42px)!important;
}

.about-ethos-tile-mission{
  grid-column:1!important;
  grid-row:1!important;
}

.about-ethos-tile-vision{
  grid-column:2!important;
  grid-row:1!important;
}

.about-ethos-tile-purpose{
  grid-column:1 / -1!important;
  grid-row:2!important;
  min-height:205px!important;
}

.about-ethos-tile h4{
  margin-bottom:16px!important;
}

.about-ethos-tile-purpose h4,
.about-ethos-tile-purpose p{
  max-width:760px!important;
}

@media(max-width:760px){
  .about-ethos{
    padding-top:34px!important;
  }

  .about-ethos-intro{
    margin-bottom:20px!important;
  }

  .about-ethos-grid{
    grid-template-columns:1fr!important;
    width:100%;
  }

  .about-ethos-tile,
  .about-ethos-tile-mission,
  .about-ethos-tile-vision,
  .about-ethos-tile-purpose{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:auto!important;
    padding:30px 24px!important;
  }

  .about-ethos-tile h4{
    font-size:clamp(2rem,10vw,3rem)!important;
  }
}

/* =========================================================
   ABOUT ETHOS - SOFTER MOSAIC PALETTE
   Purpose now uses the lighter vision palette to soften the
   transition into the leadership photo below.
   Keep at the very end of css/about.css.
   ========================================================= */

.about-ethos-grid{
  background:rgba(7,25,47,.055)!important;
  box-shadow:0 18px 46px rgba(7,25,47,.055)!important;
}

.about-ethos-tile{
  box-shadow:none!important;
}

.about-ethos-tile::before{
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,0))!important;
  opacity:.55!important;
}

.about-ethos-tile-mission{
  background:linear-gradient(135deg,#07192f 0%,#102942 100%)!important;
  color:#fff!important;
}

.about-ethos-tile-vision{
  background:linear-gradient(135deg,#eee6d6 0%,#e4d7bc 100%)!important;
  color:#07192f!important;
}

.about-ethos-tile-purpose{
  background:linear-gradient(135deg,#f6f3ed 0%,#ece8df 100%)!important;
  color:#07192f!important;
  min-height:185px!important;
}

.about-ethos-tile-purpose::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#c99d55;
  opacity:.58;
}

.about-ethos-tile h4{
  color:inherit!important;
}

.about-ethos-tile p{
  color:rgba(7,25,47,.70)!important;
}

.about-ethos-tile-mission p{
  color:rgba(255,255,255,.76)!important;
}

@media(max-width:760px){
  .about-ethos-grid{
    box-shadow:0 16px 42px rgba(7,25,47,.06)!important;
  }

  .about-ethos-tile-purpose{
    min-height:auto!important;
  }
}


/* =========================================================
   ABOUT ETHOS - MISSION / CENTER MARK / VISION
   Removes purpose and separates mission and vision with a
   neutral Lau-Tam identity mark.
   Keep at the very end of css/about.css.
   ========================================================= */

.about-ethos{
  margin-top:clamp(8px,1.6vw,18px)!important;
  padding-top:clamp(28px,3.6vw,46px)!important;
  padding-bottom:clamp(34px,4.2vw,54px)!important;
}

.about-ethos-shell{
  max-width:1120px!important;
}

.about-ethos-intro{
  margin:0 0 22px!important;
  text-align:left!important;
}

.about-ethos-intro .about-section-label{
  color:rgba(7,25,47,.58)!important;
}

.about-ethos-grid{
  width:min(980px,100%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr)!important;
  gap:2px!important;
  background:rgba(7,25,47,.055)!important;
  box-shadow:0 18px 46px rgba(7,25,47,.055)!important;
}

.about-ethos-tile,
.about-ethos-tile-mission,
.about-ethos-tile-vision{
  grid-row:1!important;
  min-height:320px!important;
  padding:clamp(34px,3.6vw,54px)!important;
}

.about-ethos-tile-mission{
  grid-column:1!important;
  background:linear-gradient(135deg,#07192f 0%,#102942 100%)!important;
  color:#fff!important;
}

.about-ethos-center{
  position:relative;
  grid-column:2!important;
  grid-row:1!important;
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  background:linear-gradient(135deg,#f6f3ed 0%,#ece8df 100%);
  overflow:hidden;
}

.about-ethos-center::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(201,157,85,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  pointer-events:none;
}

.about-ethos-center-mark{
  position:relative;
  z-index:1;
  color:#07192f;
  font-family:var(--fg,"Georama",sans-serif);
  font-size:.92rem;
  line-height:.92;
  font-weight:800;
  letter-spacing:.20em;
  text-align:center;
}

.about-ethos-center-line{
  position:relative;
  z-index:1;
  width:1px;
  height:74px;
  background:linear-gradient(to bottom, rgba(201,157,85,0), rgba(201,157,85,.82), rgba(201,157,85,0));
}

.about-ethos-tile-vision{
  grid-column:3!important;
  background:linear-gradient(135deg,#f6f3ed 0%,#ece8df 100%)!important;
  color:#07192f!important;
}

.about-ethos-tile-purpose{
  display:none!important;
}

.about-ethos-tile h4{
  color:inherit!important;
  margin-bottom:18px!important;
}

.about-ethos-tile p{
  color:rgba(7,25,47,.70)!important;
  max-width:36ch!important;
}

.about-ethos-tile-mission p{
  color:rgba(255,255,255,.76)!important;
}

html[lang="zh"] .about-ethos-center-mark{
  letter-spacing:.14em;
}

@media(max-width:980px){
  .about-ethos-grid{
    grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr)!important;
  }

  .about-ethos-tile,
  .about-ethos-tile-mission,
  .about-ethos-tile-vision,
  .about-ethos-center{
    min-height:300px!important;
  }

  .about-ethos-tile{
    padding:32px!important;
  }
}

@media(max-width:760px){
  .about-ethos{
    padding-top:30px!important;
    padding-bottom:38px!important;
  }

  .about-ethos-intro{
    margin-bottom:18px!important;
  }

  .about-ethos-grid{
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:2px!important;
  }

  .about-ethos-tile,
  .about-ethos-tile-mission,
  .about-ethos-tile-vision{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:auto!important;
    padding:30px 24px!important;
  }

  .about-ethos-center{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:96px!important;
    flex-direction:row;
    gap:22px;
  }

  .about-ethos-center-line{
    width:72px;
    height:1px;
    background:linear-gradient(to right, rgba(201,157,85,0), rgba(201,157,85,.82), rgba(201,157,85,0));
  }

  .about-ethos-tile h4{
    font-size:clamp(2rem,10vw,3rem)!important;
  }

  .about-ethos-tile p{
    max-width:none!important;
  }
}


/* =========================================================
   ABOUT ETHOS - CLEAN MISSION / VISION FINAL
   Removes top separator, removes center logo mark, and makes
   the center divider recede into the page background.
   ========================================================= */

.about-ethos{
  border-top:0!important;
  margin-top:0!important;
  padding-top:clamp(18px,2.4vw,30px)!important;
  padding-bottom:clamp(28px,3.6vw,46px)!important;
}

.about-ethos-intro{
  margin:0 0 20px!important;
}

.about-ethos-grid{
  width:min(980px,100%)!important;
  grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr)!important;
  gap:0!important;
  background:transparent!important;
  box-shadow:0 16px 42px rgba(7,25,47,.045)!important;
}

.about-ethos-center{
  background:#f4f1ec!important;
  min-height:320px!important;
  gap:0!important;
}

.about-ethos-center::before{
  display:none!important;
}

.about-ethos-center-mark{
  display:none!important;
}

.about-ethos-center-line{
  width:1px!important;
  height:92px!important;
  background:linear-gradient(
    to bottom,
    rgba(201,157,85,0),
    rgba(201,157,85,.52),
    rgba(201,157,85,0)
  )!important;
}

.about-ethos-tile-mission{
  border-right:0!important;
}

.about-ethos-tile-vision{
  border-left:1px solid rgba(7,25,47,.055)!important;
}

@media(max-width:980px){
  .about-ethos-grid{
    grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)!important;
  }
}

@media(max-width:760px){
  .about-ethos{
    padding-top:24px!important;
  }

  .about-ethos-grid{
    grid-template-columns:1fr!important;
    box-shadow:0 14px 34px rgba(7,25,47,.04)!important;
  }

  .about-ethos-center{
    min-height:54px!important;
    background:#f4f1ec!important;
  }

  .about-ethos-center-line{
    width:82px!important;
    height:1px!important;
    background:linear-gradient(
      to right,
      rgba(201,157,85,0),
      rgba(201,157,85,.52),
      rgba(201,157,85,0)
    )!important;
  }

  .about-ethos-tile-vision{
    border-left:0!important;
  }
}

/* =========================================================
   ABOUT MISSION / VISION - FINAL SPACING + CENTER GAP FIX
   Removes the visual patch in the middle and gives the label
   proper breathing room before the mosaic.
   ========================================================= */

.about-ethos-intro{
  margin:0 0 clamp(34px,4vw,52px)!important;
}

.about-ethos-grid{
  width:min(980px,100%)!important;
  grid-template-columns:minmax(0,1fr) clamp(72px,8vw,116px) minmax(0,1fr)!important;
  gap:0!important;
  background:transparent!important;
  box-shadow:none!important;
  align-items:stretch!important;
}

.about-ethos-tile,
.about-ethos-tile-mission,
.about-ethos-tile-vision{
  box-shadow:0 18px 44px rgba(7,25,47,.045)!important;
}

.about-ethos-center{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  min-height:320px!important;
}

.about-ethos-center::before,
.about-ethos-center::after{
  display:none!important;
}

.about-ethos-tile-vision{
  border-left:0!important;
}

.about-ethos-center-line{
  width:1px!important;
  height:96px!important;
  background:linear-gradient(
    to bottom,
    rgba(201,157,85,0),
    rgba(201,157,85,.46),
    rgba(201,157,85,0)
  )!important;
}

@media(max-width:760px){
  .about-ethos-intro{
    margin-bottom:26px!important;
  }

  .about-ethos-grid{
    grid-template-columns:1fr!important;
    box-shadow:none!important;
  }

  .about-ethos-center{
    min-height:52px!important;
  }

  .about-ethos-center-line{
    width:82px!important;
    height:1px!important;
    background:linear-gradient(
      to right,
      rgba(201,157,85,0),
      rgba(201,157,85,.46),
      rgba(201,157,85,0)
    )!important;
  }
}

/* =========================================================
   ABOUT MISSION / VISION - CELESTE VISION TILE
   Restores the original light blue palette for the Vision block.
   ========================================================= */
.about-ethos-tile-vision{
  background:linear-gradient(135deg,#dde9ec 0%,#b9dce0 100%)!important;
  color:#07192f!important;
}

.about-ethos-tile-vision p{
  color:rgba(7,25,47,.68)!important;
}


#team .team-stage{
  overflow:hidden;
}

#team .team-info-area{
  z-index:2;
}

#team .team-photo-area{
  z-index:1;
}

@media(max-width:760px){
  #team .team-card:not(.active),
  #team .team-photo:not(.active){
    display:none!important;
  }
}

/* =========================================================
   ABOUT FINAL SPACING - NO LEADERSHIP SECTION
   The About page now ends after Mission / Vision.
   ========================================================= */
.about-gateway{
  padding-bottom:clamp(82px,8vw,128px)!important;
}

.about-ethos{
  margin-bottom:0!important;
}