/* ---------- ABOUT HERO ---------- */
.about-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  background:var(--bg-dark);
  padding:clamp(6rem, 10vw, 8rem) clamp(2rem, 9vw, 11rem);
  overflow:hidden;
}
.about-hero-grid{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  flex-wrap:wrap;
}
.about-hero h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.15;
  animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.about-hero h1 span{display:block;}
.about-hero-tagline{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1rem, 1.6vw, 1.3rem);
  line-height:1.5;
  color:var(--text-muted);
  text-align:right;
  white-space:nowrap;
  animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.35s both;
}
@media(max-width:700px){
  .about-hero-tagline{text-align:left;white-space:normal;}
}

/* ---------- COMMITMENT SECTION ---------- */
.commitment{
  background:var(--bg-section);
  padding:clamp(4rem, 9vw, 7rem) clamp(2rem, 9vw, 11rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.commitment-inner{
  max-width:1400px;
  margin:0 auto;
}
.commitment-heading{
  text-align:center;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.5rem, 3.2vw, 2.4rem);
  margin-bottom:clamp(2.5rem, 6vw, 4.5rem);
}
.commitment-heading .cycle-word{
  font-style:italic;
  color:var(--accent-light);
  display:inline-block;
  position:relative;
  line-height:1;
}
.commitment-heading .cycle-word span{
  display:inline-block;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  position:absolute;
  bottom:0;
  left:0;
  line-height:1;
  white-space:nowrap;
}
.commitment-heading .cycle-word span.active{
  opacity:1;
  transform:translateY(0);
}
@media(prefers-reduced-motion: reduce){
  .commitment-heading .cycle-word span{transition:none;}
}

.commitment-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:center;
}
@media(min-width:900px){
  .commitment-grid{grid-template-columns:1fr minmax(200px, 320px) 1fr;gap:3rem;align-items:stretch;}
}
@media(min-width:900px) and (max-width:1099px){
  .commitment-grid{gap:1.75rem;}
}

.commitment-image-wrap{
  order:-1;
  width:100%;
  max-width:280px;
  margin:0 auto;
  aspect-ratio:9/18;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
}
@media(min-width:900px){
  .commitment-image-wrap{order:0;}
}
.commitment-image-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.commitment-col{
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}
@media(min-width:900px){
  .commitment-col-left{justify-content:space-between;}
}
.commitment-text{
  font-family:var(--font-display);
  font-size:clamp(1rem, 1.5vw, 1.2rem);
  line-height:1.75;
  color:var(--text-muted);
  text-align:center;
  max-width:480px;
  margin:0 auto;
}
@media(min-width:900px){
  .commitment-text{text-align:right;margin:0 0 0 auto;}
  .commitment-col-right{justify-content:center;}
  .commitment-col-right .commitment-text{text-align:left;margin:0;}
}
.commitment-text strong{
  color:var(--white);
  font-weight:600;
}

/* Slide-in-from-image reveal: paragraph starts translated toward the image
   (positive X = from the right, i.e. text slides out to the left after
   appearing near the image; negative X = slides out to the right) and
   settles into place as it scrolls into view. */
.slide-reveal{
  opacity:0;
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.slide-reveal.is-visible{opacity:1;transform:translateX(0) !important;}

.slide-from-right{transform:translateX(48px);}
.slide-from-left{transform:translateX(-48px);}

@media(max-width:899px){
  /* On narrow layouts everything stacks under the image — keep the fade but
     drop the horizontal slide so text doesn't fly in sideways off-screen. */
  .slide-from-right,.slide-from-left{transform:translateY(20px);}
}

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

/* ---------- VISION & MISSION ---------- */
.vm-split{
  display:flex;
  gap:clamp(6px, 1vw, 14px);
  background:#000;
  padding:clamp(6px, 1vw, 14px);
}
.vm-panel{
  position:relative;
  flex:1 1 0;
  aspect-ratio:1/1;
  overflow:hidden;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.vm-panel-left{background-image:url('left.png');}
.vm-panel-right{background-image:url('right.png');}
@media(min-width:700px){
  .vm-panel{aspect-ratio:4/3;}
}
@media(min-width:1100px){
  .vm-panel{aspect-ratio:16/11;}
}
/* Both panels show the same full photo independently (standard cover/center
   crop) rather than each showing half of one stretched image. */

.vm-panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.05) 68%, transparent 100%);
  pointer-events:none;
}

/* When this section sits at the very top of the page (About page, replacing
   the old hero), the fixed navbar above it is transparent on desktop — add
   a light top-down shade behind it so the logo/links stay legible against
   whatever the photo looks like at its very top edge. */
.vm-split-top{position:relative;}
.vm-split-top::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:110px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  pointer-events:none;
  z-index:1;
}

.vm-text{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  z-index:1;
}
.vm-panel-right .vm-text{text-align:right;}

.vm-text h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  color:var(--white);
  margin-bottom:0.7rem;
}
.vm-text p{
  max-width:520px;
  margin-left:0;
  color:rgba(255,255,255,0.88);
  font-size:clamp(0.76rem, 1vw, 0.88rem);
  line-height:1.65;
}
.vm-panel-right .vm-text p{margin-left:auto;margin-right:0;}
.vm-text p strong{
  color:var(--white);
  font-weight:600;
  letter-spacing:0.5px;
}

@media(max-width:700px){
  .vm-split{flex-direction:column;gap:0;}
  /* .vm-panel's flex:1 1 0 (set for the row layout) turns into a *height*
     basis of 0 once the main axis flips to vertical here — with .vm-split's
     height staying auto, there's no extra space for flex-grow to hand out,
     so both panels collapse to 0 height and the whole section disappears.
     flex:none lets aspect-ratio size each panel from its (now full) width
     instead. */
  .vm-panel{flex:none;aspect-ratio:4/3;}

  /* Top.png and Bottom.png are the top and bottom halves of one photo, so
     with the 0 gap set above they line up into what reads as a single
     continuous image running behind both the Vision and Mission text. */
  .vm-panel-left{background-image:url('Top.png');}
  .vm-panel-right{background-image:url('Bottom.png');}

  /* These source images are already darkened/graded for text legibility, so
     the section's normal full ::before gradient (meant for a still
     full-brightness photo) would double up on that. Instead, give just the
     Vision panel a top-down fade behind its heading, and the Mission panel
     a bottom-up fade behind its own text — this since Vision's text sits
     near the top of its panel while Mission's sits lower in its panel, each
     needing legibility help on a different edge. */
  .vm-panel::before{content:none;}
  .vm-panel-left::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, transparent 60%);
    pointer-events:none;
  }
  .vm-panel-right::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 35%, transparent 60%);
    pointer-events:none;
  }

  .vm-text h2{font-size:1.35rem;margin-bottom:0.5rem;}
  .vm-text p{font-size:0.72rem;line-height:1.55;}

  .vm-panel-right .vm-text{text-align:left;}
  .vm-panel-right .vm-text p{margin-left:0;margin-right:auto;}
}

/* ---------- GENERAL MANAGER SPOTLIGHT ---------- */
.gm-spotlight{
  position:relative;
  background:var(--bg-dark);
  padding:clamp(4rem, 9vw, 7rem) clamp(2rem, 9vw, 11rem) clamp(2rem, 5vw, 3.5rem);
  overflow:visible;
}
.gm-spotlight-grid{
  position:relative;
  max-width:1500px;
  margin:0 auto;
  height:clamp(480px, 48vw, 650px);
}

.gm-text{
  position:relative;
  z-index:1;
  width:100%;
  padding-top:clamp(0.5rem, 2vw, 1.5rem);
}
.gm-text-top{padding-top:0;}
.gm-name{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.4rem, 5.5vw, 4.2rem);
  line-height:1.05;
  margin-bottom:0.6rem;
}
.gm-role{
  font-size:1.05rem;
  color:var(--text-muted);
}
.gm-phone{margin-top:0.15rem;font-size:1.05rem;}
.gm-phone a{color:var(--white);}

.gm-quote{
  margin-top:clamp(3.5rem, 9vw, 6rem);
  max-width:480px;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(1.1rem, 2vw, 1.35rem);
  line-height:1.6;
  color:var(--white);
  position:relative;
  padding-left:1.75rem;
}
.gm-quote-mark{
  position:absolute;
  left:0;top:-0.6rem;
  font-family:var(--font-display);
  font-style:normal;
  font-size:2.6rem;
  color:var(--accent-light);
  line-height:1;
}

/* Anchored toward the left (text) side of its own box, rather than centered,
   so the actual face/hair pixels reach the tail of the name instead of
   floating in the middle of a wider bounding box. */
.gm-photo-wrap{
  position:absolute;
  top:-5%;
  left:58%;
  width:38%;
  height:100%;
  z-index:2;
}
.gm-photo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom left;
  display:block;
}
@media(min-width:900px) and (max-width:1199px){
  .gm-photo-wrap{width:32%;left:60%;top:-8%;}
}

@media(max-width:899px){
  .gm-spotlight-grid{
    height:auto;
    display:flex;
    flex-direction:column;
  }
  /* display:contents drops .gm-text's own box but keeps its children
     (name/role/phone block + quote) participating directly in the grid's
     flex layout, so they can be reordered independently around the photo
     rather than staying locked together as one unit. */
  .gm-text{position:relative;inset:auto;display:contents;}
  .gm-text-top{order:1;}
  .gm-photo-wrap{
    order:2;
    position:relative;
    top:auto;left:auto;right:auto;bottom:auto;width:min(340px, 70vw);
    height:auto;
    margin:2.5rem auto 0;
  }
  .gm-photo-wrap img{height:auto;object-fit:initial;}
  .gm-quote{order:3;margin-top:clamp(2.5rem, 8vw, 4rem);}
}

/* ---------- GUIDED BY EXPERTISE ---------- */
.expertise{
  background:var(--bg-dark);
  border-top:1px solid var(--line);
}
.expertise-grid{
  display:grid;
  grid-template-columns:1fr;
}
@media(min-width:900px){
  .expertise-grid{grid-template-columns:1fr 1fr;min-height:640px;}
}

.expertise-image{
  position:relative;
  min-height:340px;
  overflow:hidden;
}
.expertise-image img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  position:absolute;
  inset:0;
}
@media(min-width:900px){
  .expertise-image{min-height:100%;}
}

.expertise-content{
  padding:clamp(2.5rem, 6vw, 5rem) clamp(2rem, 6vw, 4.5rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.expertise-content h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.6vw, 2.6rem);
  line-height:1.25;
  color:var(--white);
  margin-bottom:clamp(2rem, 5vw, 3rem);
}

.expertise-list{
  display:flex;
  flex-direction:column;
  gap:clamp(1.5rem, 3.5vw, 2.25rem);
}
.expertise-item h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.2rem;
  color:var(--white);
  padding-bottom:0.75rem;
  border-bottom:1px solid var(--accent-light);
  margin-bottom:0.6rem;
}
.expertise-item p{
  color:var(--text-muted);
  font-size:0.92rem;
  line-height:1.7;
}