/* =====================================================================
   RYETEC — About Us
   Custom theme layered on Bootstrap 5.3
   ===================================================================== */


/* ---------- Tokens ---------- */
:root {
  --bg-dark: #0a0a0a;
  --bg-alt: #1c1c1c;
  --bg-card: #141414;
  --yellow: #FEC300;
  --yellow-dark: #FEC300;
  --text-white: #ffffff;
  --text-grey: #AFAFAF;
  --text-muted: linear-gradient(180deg, #FFF -22.18%, #999 100%);
--text-muted-gradient: linear-gradient(180deg, #FFFFFF 0%, #808080 100%);
  --text-muted-2: #C8C8C8;
  --border-soft: rgba(255, 255, 255, 0.08);
  --font-display: 'Sora', sans-serif;
  --font-body: 'Roboto', sans-serif;
}
/* ------------old------------- */
.eyebrow {
    color: var(--text-grey);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    font-family: var(--font-display);
    
}
.eyebrow-underline {
    color: var(--text-grey);
    font-size: 16px;
    font-weight: 400;
    
    padding-bottom: 6px;
    margin-bottom: 1rem;
    display: inline-block;
    font-family: var(--font-display);
}
p.eyebrow-underline:after {
    content: '';
    height: 2px;
    width: 30px;
    display: block;
    background-color: #FEC300;
}

.section-title-lg {
    font-weight: 500;
    font-size: 60px;
    margin-bottom: 0px;
    line-height: normal;
    background: linear-gradient(180deg, #FFF -22.18%, #999 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.section-title-lg em {
  font-weight: 800;
}
p {
	color:#AFAFAF !important;
}
.about_values_full_image{
	margin-bottom:200px;
}
.values-intro {
	font-size:20px;
	margin-bottom:60px;
}


*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-dark);
  color:var(--text-white);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}

.about .container{max-width:var(--container);margin-inline:auto;padding-inline:24px;width:100%;}
.container-about {max-width:1380px;margin-inline:auto;padding-inline:24px;width:100%;}
/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Pill button ---------- */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#151005;
  font-weight:700;font-size:.82rem;letter-spacing:.02em;
  text-transform:uppercase;
  padding:.72em 1.5em;border-radius:999px;border:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  cursor:pointer;
}
.btn-pill:hover{transform:translateY(-2px);box-shadow:0 10px 30px -8px rgba(254,195,0,.5);background:#ffce1f;color:#151005;}




/* =====================================================================
   HERO
   ===================================================================== */
.hero-about{padding-top:150px;text-align:center;}

.hero-title{
  font-weight:500;line-height:1.06;text-align: center;
  font-size:clamp(2.1rem,5.3vw,4.15rem);
  margin:0 auto 46px;max-width:1100px;color:var(--ink);
}
.hero-title .muted{color:var(--muted);}
.hero-media{
  	border-radius:var(--radius);overflow:hidden;
  	box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
	margin:auto;
}
.hero-media img{width:100%;height:auto;object-fit:cover; margin: 0 auto;}

/* =====================================================================
   SECTION HELPERS
   ===================================================================== */

.eyebrow .tick{width:26px;height:2px;background:var(--accent);display:inline-block;}
.section-title{
  font-weight:500;color:var(--ink-soft);letter-spacing:-.01em;
  font-size:clamp(1.9rem,4vw,3.1rem);margin:0 0 34px;
}
.section-title em{font-style:italic;font-weight:800;color:var(--outline-word);letter-spacing:0;}

/* =====================================================================
   VALUES
   ===================================================================== */
/* ==========================================================================
   

 

/* ==========================================================================
   DESIGN TOKENS — pulled directly from the reference image
   ========================================================================== */
:root{
  --c-bg:            #0c0c0c;
  --c-line-dim:      #3a3a34;   /* unfilled rail */
  --c-line-bright:   #d8d2bf;   /* filled / drawn stroke */
  --c-yellow:        #ecc211;   /* active dot + active number */
  --c-yellow-dim:    #4a3f14;   /* inactive number (dark gold) */
  --c-heading:       #e9e9e9;
  --c-body:          #9a9a9a;
  --c-body-strong:   #c7c7c7;

  /* SVG viewBox is 1063 x 1289 — every % position below is derived from it */
  --stage-w: 1063;
  --stage-h: 1289;
}

*{ box-sizing: border-box; }

html, body{
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* Filler top/bottom so the section doesn't look orphaned when previewed standalone */
.spacer{ height: 40vh; }

/* ==========================================================================
   SECTION / CONTAINER
   ========================================================================== */
.timeline-section{
  position: relative;
  padding: 200px 0px 300px;
  background: var(--c-bg);
}

.container-xl{
  max-width: 1400px;
}
/* Inside the timeline stage, .container-xl must fill the stage so that
   the absolutely-positioned SVG, dots, and content blocks share the
   same coordinate space (the dots use % of the nearest positioned
   ancestor — that ancestor must be the stage, not the 1400px cap). */
.timeline-stage > .container-xl{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
}
.about-banner {
  padding: 0px 50px;
}
/* ==========================================================================
   DESKTOP STAGE
   Fixed aspect-ratio canvas so every absolutely-positioned child (photo,
   dots, text blocks) scales together and stays perfectly locked to the
   SVG curve beneath it, at any viewport width >=992px.
   ========================================================================== */
.timeline-stage{
  position: relative;
  width: 100%;
  aspect-ratio: var(--stage-w) / var(--stage-h);
  display: none;  /* hidden by default — shown on desktop only */
  margin-top: 30px;
}

@media (min-width: 992px){
  .timeline-stage{ display: block; }
}

/* ==========================================================================
   SVG SHOW / HIDE — the single stage holds both SVGs; CSS switches them
   ========================================================================== */

/* Desktop SVG: visible ≥992px, hidden below */
.svg-desktop { display: block; }
.svg-mobile  { display: none; }

@media (max-width: 991.98px) {
  .svg-desktop { display: none; }
  .svg-mobile  { display: block; }

  /* On mobile the stage aspect-ratio must match the mobile viewBox (322×389) */
  .timeline-stage {
    aspect-ratio: 322 / 389;
    display: block;
  }

  /* Hide the photo block on mobile */
  .photo-block { display: none; }

  /* ---- Content blocks: override inline style --x/--y/--w with !important ---- */
  /* Item positions mapped to the 322×389 mobile viewBox */
  .timeline-item.one-item {
    left: 8% !important;
    top:  0% !important;
    width: 45% !important;
  }
  .timeline-item.second-item {
    left: 50% !important;
    top:  30% !important;
    width: 47% !important;
  }
  .timeline-item.thrd-item {
    left: 1% !important;
    top:  61% !important;
    width: 39% !important;
  }
  .timeline-item.four-item {
    left: 45% !important;
    top: 96% !important;
    width: 50% !important;
  }

  /* ---- Dots: override inline style --x/--y with !important ---- */
  .dot.one   { left: 53% !important; top: 0%  !important; width: 15px !important; height: 15px !important;}
  .dot.two   { left: 49% !important; top: 29% !important; width: 15px !important; height: 15px !important; }
  .dot.three { left: 9% !important; top: 57% !important; width: 15px !important; height: 15px !important;}
  .dot.four  { left: 61% !important; top: 97% !important; width: 15px !important; height: 15px !important;}

  /* ---- Text scaling ---- */
  .item-number { font-size: 20px !important; line-height: 1 !important; }
  .item-title  { font-size: 12px !important; line-height: 1.2 !important; margin-bottom: 3px; }
  .item-copy   { font-size: 10px !important; line-height: 1.3 !important; }

  /* Reset any GSAP inline transforms so they don't offset the repositioned items */
  .timeline-item {
    transform: none !important;
    translate: none !important;
  }

  .timeline-section {
    padding: 60px 0 140px;
  }
}

.timeline-svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.track-path{
  stroke: #2C3215;
  stroke-width: 2px;
  /* stroke-linecap: round; */
  fill: none;
}

.fill-path{
  stroke: #FEC300;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ---------- photo ---------- */
.photo-block{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 6px;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}
.photo-block img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- dots ---------- */
.dot{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 24px;
  height: 24px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--c-yellow-dim);
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  z-index: 4;
  cursor: default;
  transform: scale(0.72);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1),
              background-color .45s ease,
              box-shadow .45s ease;
}
.dot::after{
  content:"";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: transparent;
  transition: background-color .45s ease;
}
.dot.is-active{
  background: var(--c-yellow);
  transform: scale(1);
  box-shadow: 0 0 0 4px rgba(236,194,17,0.12), 0 0 22px rgba(236,194,17,0.55);
}

/* ---------- text blocks ---------- */
.timeline-item{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: 2;
}

.item-number{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
  color: var(--c-yellow-dim);
  margin-bottom: 6px;
  transition: color .5s ease;
}
.timeline-item.is-active .item-number{ color: var(--c-yellow); }

.item-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.28;
  color: var(--c-heading);
  margin: 0 0 10px;
}

.item-copy{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: var(--c-body);
  margin: 0;
  
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.dot:focus-visible{
  outline: 2px solid var(--c-yellow);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  .dot, .item-number{ transition: none !important; }
}


/* =====================================================================
   OBSESSED BAND
   ===================================================================== */
.obsessed{background:url(https://sandbox.ryetec.co/wp-content/uploads/2026/07/Section-7.png) no-repeat; background-size:cover;90px;padding:100px 0;}
.obsessed-inner{max-width:1058px; text-align: left; margin:auto;}
.obsessed-title{font-size:46px;font-weight:500;line-height:46px;color:#fff;margin:0 0 50px;}
.obsessed-text{color:var(--muted);font-size:30px;line-height:40px;margin:0;}

/* =====================================================================
   TEAM CAROUSEL
   ===================================================================== */
.team{padding:200px 0 40px;}
.team .section-title{margin-bottom:60px;}
.carousel{
  display:flex;align-items:center;justify-content:flex-start;
  height:700px;padding:0 270px 0 0;max-width:100%;
  margin-inline:0;width:100%;
}
@media (min-width:768px){
  .member:nth-child(1){flex-basis:clamp(120px,12vw,220px);height:52%;}
  .member:nth-child(2){flex-basis:clamp(160px,16vw,300px);height:64%;}
  .member:nth-child(3){flex-basis:clamp(200px,20vw,380px);height:76%;}
  .member:nth-child(4){flex-basis:clamp(240px,24vw,460px);height:88%;}
  .member:nth-child(5){flex-basis:clamp(280px,28vw,520px);height:96%;}
}
.team .container-fluid{padding-left:0;padding-right:0;margin:0;width:100%;max-width:100%;}
.member{
  position:relative;
/*   flex:0 0 clamp(150px,15vw,365px);    */
  height:80%;order:1;
/*   margin-left:-42px;                    */
  border:none;padding:0;background:none;
  border-radius:20px;overflow:hidden;cursor:pointer;
  box-shadow:-26px 30px 50px -20px rgba(0,0,0,.75);
  transition:flex-basis .8s var(--ease),height .8s var(--ease),box-shadow .8s var(--ease),transform .8s var(--ease);
  outline-offset:4px;
}
.member:first-child{margin-left:0;}
.member.is-active{
  order:2;                              
  flex-basis:clamp(430px,44vw,650px);  
  height:100%;
  box-shadow:-34px 40px 70px -26px rgba(0,0,0,.85);
}
.member-photo{
  position:absolute;inset:0;
  background-size:cover;background-position:center 20%;
  filter:grayscale(.55) brightness(.48) contrast(1.02);
  transform:scale(1.05);
  transition:filter .8s var(--ease),transform .8s var(--ease);
}
.member.is-active .member-photo{filter:none;transform:scale(1);}
.member::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,6,6,.92) 0%,rgba(6,6,6,.35) 40%,transparent 66%);
}
.member-meta{
  position:absolute;left:20px;right:12px;bottom:22px;z-index:2;text-align:left;
  display:flex;flex-direction:column;gap:3px;
}
.member-name{
  color:#fff;font-weight:400;font-size:46px;line-height:1.1;white-space:nowrap;
}
.member-role{
  color:#AFAFAF;font-size:22px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  transform:translateY(8px);max-height:0;
  transition:opacity .5s var(--ease) .1s,transform .6s var(--ease) .1s,max-height .5s var(--ease);
}
.member.is-active .member-role{opacity:1;transform:none;max-height:2em;}

.member:not(.is-active) .member-name{font-size:36px;font-weight:400;}
.member:not(.is-active) .member-meta{left:18px;right:auto;bottom:42px;}
#teamCarousel .member:first-child .member-name {
  font-size:30px;
}
#teamCarousel .member:nth-child(2) .member-name {
  font-size:32px;
}
#teamCarousel .member:nth-child(3) .member-name {
  font-size:40px;
}
#teamCarousel .member:nth-child(4) .member-name {
  font-size:42px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:991px){
  .values-body{grid-template-columns:1fr;gap:34px;}
  .values-aside{position:static;max-width:420px;}
  .steps-line{left:-38px;}
  .step .dot{left:-44px;}
  .carousel{height:500px;}
  .member.is-active{flex-basis:clamp(360px,52vw,560px);}
}

@media (max-width:767px){
  .obsessed-text {
    font-size: 16px;
    line-height: 26px;
  }
  .obsessed-title {
    font-size: 20px;
    line-height: 28px;
    margin: 0 0 20px;
  }
  .timeline-section {
    padding: 60px 0 130px;
  }
  .team {
    padding: 60px 0 40px;
  }
  .hero { padding-top: 120px; }
  .hero-title { margin-bottom: 32px; }
  .values { padding: 80px 0 20px; }
  .obsessed { padding: 40px 0; }

  /* Carousel → vertical stack on mobile so photos stay tall & readable */
  /* .carousel{flex-direction:column;height:auto;gap:12px;padding:0 24px;align-items:stretch;}
  .member{height:104px;width:100%;flex:none;flex-basis:auto;margin-left:0;order:0;
          box-shadow:0 16px 30px -18px rgba(0,0,0,.7);transition:height .7s var(--ease);}
  .member.is-active{height:400px;flex-basis:auto;order:0;}
  .member:not(.is-active) .member-meta{align-items:flex-start;left:20px;right:12px;bottom:18px;}
  .member:not(.is-active) .member-name{font-size:1.15rem;}
  .member-photo{background-position:center 20%;} */

  
}

@media (max-width:400px){
  .container-xxl{padding-inline:18px;}
  .carousel{padding-inline:18px;}
}

/* ---- Team carousel: support more than 5 members (dynamic count) ---- */
@media (min-width:768px){
  .member:nth-child(6){flex-basis:clamp(280px,28vw,520px);height:96%;}
  .member:nth-child(7){flex-basis:clamp(280px,28vw,520px);height:96%;}
  .member:nth-child(8){flex-basis:clamp(280px,28vw,520px);height:96%;}
  .member:nth-child(n+9){flex-basis:clamp(280px,28vw,520px);height:96%;}
}
#teamCarousel .member:nth-child(n+5) .member-name{font-size:44px;}
/* Keep the featured card's expansion consistent regardless of position */
.member.is-active{will-change:flex-basis,transform;}

/* =====================================================================
   Team carousel — tablet & mobile
   Same expanding-accordion layout as desktop (featured card pinned right
   via CSS order), tuned so ~4 cards show on tablet and ~3 on mobile.
   Ordering is handled purely in CSS so the click + autoplay animation
   works identically on every device.
   ===================================================================== */
.team .container-fluid { overflow: hidden; }

/* ---- Tablet: ~4 cards ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .carousel {
    height: 300px;
    justify-content: center;   /* keep the featured (right-most) card in view */
    padding: 0 24px;
  }
  /* Even, compact non-active widths so about four cards fit */
  .member,
  .member:nth-child(1),
  .member:nth-child(2),
  .member:nth-child(3),
  .member:nth-child(4),
  .member:nth-child(5),
  .member:nth-child(n+6) {
    flex: 0 0 clamp(92px, 13vw, 150px);
    height: 82%;
    margin-left: -30px;
  }
  .member.is-active {
    flex-basis: clamp(300px, 42vw, 430px);
    height: 100%;
  }
  .member-name { font-size: 34px; }
  .member:not(.is-active) .member-name,
  #teamCarousel .member:first-child .member-name,
  #teamCarousel .member:nth-child(2) .member-name,
  #teamCarousel .member:nth-child(3) .member-name,
  #teamCarousel .member:nth-child(4) .member-name,
  #teamCarousel .member:nth-child(n+5) .member-name { font-size: 18px; }
  .member-role { font-size: 16px; }
}

/* ---- Mobile: ~3 cards ---- */
@media (max-width: 767.98px) {
  .team { padding: 60px 0 40px; }
  .team .section-title,
  .team .section-title-lg { margin-bottom: 36px; }
  .carousel {
    height: 300px;
    justify-content: center;   /* featured card stays visible on the right */
    padding: 0 14px;
  }
  .member,
  .member:nth-child(1),
  .member:nth-child(2),
  .member:nth-child(3),
  .member:nth-child(4),
  .member:nth-child(5),
  .member:nth-child(n+6) {
    flex: 0 0 clamp(64px, 20vw, 96px);
    height: 84%;
    margin-left: -40px;
    border-radius: 14px;
  }
  .member.is-active {
    flex-basis: clamp(190px, 60vw, 300px);
    height: 100%;
  }
  .member-name { font-size: 22px; }
  .member:not(.is-active) .member-name,
  #teamCarousel .member:first-child .member-name,
  #teamCarousel .member:nth-child(2) .member-name,
  #teamCarousel .member:nth-child(3) .member-name,
  #teamCarousel .member:nth-child(4) .member-name,
  #teamCarousel .member:nth-child(n+5) .member-name { font-size: 14px; }
  .member:not(.is-active) .member-meta { left: 12px; bottom: 30px; }
  .member-role { font-size: 12px; }
}