/* ===== About Us Widget 02 Style 01 ===== */
/* =========================================================
   01. RESET
========================================================= */

.ybcs2-section,
.ybcs2-section * {
  box-sizing: border-box;
}

.ybcs2-section {
  --ybcs2-bg: #f7f5f0;
  --ybcs2-paper: #fbfaf7;

  --ybcs2-ink: #171714;
  --ybcs2-text: #68645d;
  --ybcs2-muted: #918b82;

  --ybcs2-warm: #9b8169;
  --ybcs2-warm-dark: #725e4b;

  --ybcs2-line: rgba(111, 98, 81, 0.16);
  --ybcs2-node: #aab7a6;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;

  color: var(--ybcs2-ink);

  background:
    radial-gradient(
      circle at 89% 4%,
      rgba(217, 221, 211, 0.30),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #fbfaf7 0%,
      var(--ybcs2-bg) 100%
    );

  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


/* =========================================================
   02. INNER WIDTH AND VERTICAL HEIGHT
========================================================= */

.ybcs2-inner {
  position: relative;
  z-index: 1;

  width: min(84vw, 1360px);

  margin: 0 auto;

  padding:
    34px
    0
    44px;
}


/* =========================================================
   03. FACTS
========================================================= */

.ybcs2-facts {
  display: grid;

  grid-template-columns:
    minmax(155px, 1fr)
    minmax(135px, 0.82fr)
    minmax(170px, 1fr)
    minmax(180px, 1.08fr)
    minmax(225px, 1.28fr);

  gap:
    clamp(18px, 1.9vw, 30px);

  align-items: center;
}


.ybcs2-fact {
  min-width: 0;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap: 12px;

  align-items: start;

  padding: 7px 0;
}


.ybcs2-fact__icon {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ybcs2-warm);
}


.ybcs2-fact__icon svg {
  width: 33px;
  height: 33px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.ybcs2-fact__content {
  min-width: 0;
}


.ybcs2-fact h3 {
  margin: 0;

  color: var(--ybcs2-ink);

  font-size: 14px;
  font-weight: 720;
  line-height: 1.25;
  letter-spacing: -0.012em;
}


.ybcs2-fact p {
  max-width: 180px;

  margin:
    7px
    0
    0;

  color: var(--ybcs2-text);

  font-size: 11.5px;
  line-height: 1.48;
}


/* =========================================================
   04. QUOTE
========================================================= */

.ybcs2-quote {
  position: relative;

  min-height: 106px;

  display: flex;
  align-items: center;

  padding:
    22px
    22px
    18px
    26px;

  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(229, 232, 223, 0.88),
      rgba(240, 240, 234, 0.94)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}


.ybcs2-quote__mark {
  position: absolute;

  top: 9px;
  left: 20px;

  color: #70766b;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}


.ybcs2-quote p {
  margin:
    10px
    0
    0;

  color: #484943;

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   05. DIVIDER
========================================================= */

.ybcs2-divider {
  width: 100%;
  height: 1px;

  margin:
    24px
    0
    28px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(104, 91, 74, 0.18) 5%,
      rgba(104, 91, 74, 0.18) 94%,
      transparent
    );
}


/* =========================================================
   06. STORY LAYOUT
========================================================= */

.ybcs2-story {
  display: grid;

  grid-template-columns:
    250px
    minmax(0, 1fr);

  gap:
    clamp(38px, 4vw, 64px);

  align-items: start;
}


/* =========================================================
   07. STORY INTRO
========================================================= */

.ybcs2-intro {
  min-width: 0;

  padding-top: 8px;
}


.ybcs2-intro__eyebrow {
  display: block;

  margin-bottom: 9px;

  color: var(--ybcs2-warm-dark);

  font-size: 9.5px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.ybcs2-intro h2 {
  margin: 0;

  color: var(--ybcs2-ink);

  font-size:
    clamp(34px, 2.5vw, 43px);

  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}


.ybcs2-intro__main {
  margin:
    18px
    0
    0;

  color: var(--ybcs2-text);

  font-size: 12.5px;
  line-height: 1.62;
}


.ybcs2-intro__secondary {
  margin:
    13px
    0
    0;

  color: var(--ybcs2-muted);

  font-size: 11.5px;
  line-height: 1.58;
}


/* =========================================================
   08. TIMELINE LAYOUT
========================================================= */

.ybcs2-timeline {
  min-width: 0;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    clamp(24px, 2.8vw, 38px);

  align-items: start;
}


/* =========================================================
   09. STAGE
========================================================= */

.ybcs2-stage {
  min-width: 0;

  cursor: pointer;
  outline: none;

  opacity: 0;

  transform: translateY(14px);

  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(.2, .8, .2, 1);
}


.ybcs2-section.is-visible
.ybcs2-stage {
  opacity: 1;
  transform: translateY(0);
}


.ybcs2-section.is-visible
.ybcs2-stage:nth-child(2) {
  transition-delay: 80ms;
}


.ybcs2-section.is-visible
.ybcs2-stage:nth-child(3) {
  transition-delay: 160ms;
}


/* =========================================================
   10. STAGE IMAGE
========================================================= */

.ybcs2-stage__media {
  position: relative;

  width: 100%;
  height: 132px;

  overflow: hidden;

  border-radius: 10px;

  background: #ddd8cf;

  box-shadow:
    0 9px 23px rgba(56, 48, 39, 0.075);

  transition:
    transform 300ms cubic-bezier(.2, .8, .2, 1),
    box-shadow 300ms ease;
}


.ybcs2-stage__media::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(13, 12, 10, 0.01),
      rgba(13, 12, 10, 0.11)
    );
}


.ybcs2-stage__media img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center center;

  filter:
    saturate(0.82)
    contrast(0.98)
    brightness(0.96);

  transform: scale(1.015);

  transition:
    transform 500ms cubic-bezier(.2, .8, .2, 1),
    filter 350ms ease;
}


.ybcs2-stage:nth-child(1)
.ybcs2-stage__media img {
  object-position: center 48%;
}


.ybcs2-stage:nth-child(2)
.ybcs2-stage__media img {
  object-position: center 54%;
}


.ybcs2-stage:nth-child(3)
.ybcs2-stage__media img {
  object-position: center 46%;
}


.ybcs2-stage__number {
  position: absolute;

  top: 10px;
  right: 10px;

  z-index: 2;

  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(255, 255, 255, 0.52);

  border-radius: 50%;

  color: rgba(255, 255, 255, 0.94);

  background:
    rgba(24, 22, 19, 0.26);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: 8.5px;
  font-weight: 720;
}


/* =========================================================
   11. YEAR AND CONNECTOR
========================================================= */

.ybcs2-stage__meta {
  min-width: 0;

  margin-top: 13px;

  display: flex;
  align-items: center;

  gap: 13px;
}


.ybcs2-stage__year {
  flex: 0 0 auto;

  color: var(--ybcs2-ink);

  font-size: 19px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.035em;
}


.ybcs2-stage__line {
  position: relative;

  width: 100%;
  height: 1px;

  display: block;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(146, 153, 139, 0.42) 0,
      rgba(146, 153, 139, 0.42) 3px,
      transparent 3px,
      transparent 7px
    );
}


.ybcs2-stage__line::before,
.ybcs2-stage__line::after {
  content: "";

  position: absolute;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--ybcs2-node);

  transform: translateY(-50%);
}


.ybcs2-stage__line::before {
  left: 0;
}


.ybcs2-stage__line::after {
  right: -20px;
}


/* =========================================================
   12. STAGE COPY
========================================================= */

.ybcs2-stage h3 {
  margin:
    8px
    0
    0;

  color: var(--ybcs2-warm-dark);

  font-size: 9px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: 0.055em;

  text-transform: uppercase;
}


.ybcs2-stage p {
  max-width: 270px;

  margin:
    8px
    0
    0;

  color: var(--ybcs2-text);

  font-size: 11px;
  line-height: 1.52;
}


/* =========================================================
   13. ACTIVE / HOVER
========================================================= */

.ybcs2-stage:hover
.ybcs2-stage__media,
.ybcs2-stage.is-active
.ybcs2-stage__media {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(56, 48, 39, 0.13);
}


.ybcs2-stage:hover
.ybcs2-stage__media img,
.ybcs2-stage.is-active
.ybcs2-stage__media img {
  transform: scale(1.055);

  filter:
    saturate(0.96)
    contrast(1)
    brightness(1);
}


/* =========================================================
   14. LARGE DESKTOP
========================================================= */

@media (min-width: 1700px) {

  .ybcs2-inner {
    width: min(82vw, 1480px);

    padding-top: 38px;
    padding-bottom: 49px;
  }

  .ybcs2-story {
    grid-template-columns:
      270px
      minmax(0, 1fr);
  }

  .ybcs2-stage__media {
    height: 145px;
  }

}


/* =========================================================
   15. MEDIUM DESKTOP
========================================================= */

@media (max-width: 1450px) {

  .ybcs2-inner {
    width: min(89vw, 1260px);

    padding-top: 30px;
    padding-bottom: 40px;
  }

  .ybcs2-facts {
    grid-template-columns:
      minmax(145px, 1fr)
      minmax(120px, 0.8fr)
      minmax(160px, 1fr)
      minmax(165px, 1.05fr)
      minmax(205px, 1.25fr);

    gap: 16px;
  }

  .ybcs2-fact {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    gap: 10px;
  }

  .ybcs2-fact__icon {
    width: 32px;
    height: 32px;
  }

  .ybcs2-fact__icon svg {
    width: 29px;
    height: 29px;
  }

  .ybcs2-quote {
    min-height: 96px;
  }

  .ybcs2-story {
    grid-template-columns:
      225px
      minmax(0, 1fr);

    gap: 38px;
  }

  .ybcs2-stage__media {
    height: 122px;
  }

}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 1024px) {

  .ybcs2-section {
    width: 100%;

    margin-left: 0;
    margin-right: 0;
  }

  .ybcs2-inner {
    width: calc(100% - 54px);

    padding-top: 38px;
    padding-bottom: 52px;
  }

  .ybcs2-facts {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      16px
      32px;
  }

  .ybcs2-quote {
    grid-column:
      1 / -1;

    min-height: 0;

    margin-top: 4px;
  }

  .ybcs2-divider {
    margin:
      26px
      0
      28px;
  }

  .ybcs2-story {
    display: block;
  }

  .ybcs2-intro {
    max-width: 620px;

    margin-bottom: 27px;

    padding-top: 0;
  }

  .ybcs2-intro__main,
  .ybcs2-intro__secondary {
    max-width: 580px;
  }

  .ybcs2-timeline {
    gap: 20px;
  }

  .ybcs2-stage__media {
    height: auto;
    aspect-ratio: 16 / 8.5;
  }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 767px) {

  .ybcs2-inner {
    width: calc(100% - 40px);

    padding-top: 34px;
    padding-bottom: 46px;
  }

  .ybcs2-facts {
    display: block;
  }

  .ybcs2-fact {
    grid-template-columns:
      40px
      minmax(0, 1fr);

    gap: 13px;

    padding:
      13px
      0;

    border-bottom:
      1px solid var(--ybcs2-line);
  }

  .ybcs2-fact__icon {
    width: 38px;
    height: 38px;
  }

  .ybcs2-fact__icon svg {
    width: 33px;
    height: 33px;
  }

  .ybcs2-fact h3 {
    font-size: 15px;
  }

  .ybcs2-fact p {
    max-width: 280px;

    margin-top: 5px;

    font-size: 12px;
  }

  .ybcs2-quote {
    margin-top: 20px;

    padding:
      24px
      22px
      19px
      27px;
  }

  .ybcs2-divider {
    margin:
      28px
      0
      30px;
  }

  .ybcs2-intro h2 {
    font-size: 36px;
  }

  .ybcs2-intro__main {
    font-size: 13px;
  }

  .ybcs2-timeline {
    display: block;
  }

  .ybcs2-stage {
    display: grid;

    grid-template-columns:
      minmax(135px, 0.9fr)
      minmax(0, 1.1fr);

    gap: 18px;

    align-items: center;

    margin-bottom: 24px;

    padding-bottom: 24px;

    border-bottom:
      1px solid var(--ybcs2-line);
  }

  .ybcs2-stage:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ybcs2-stage__media {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .ybcs2-stage__meta {
    margin-top: 0;
  }

  .ybcs2-stage__line {
    display: none;
  }

}


/* =========================================================
   18. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .ybcs2-inner {
    width: calc(100% - 32px);
  }

  .ybcs2-stage {
    display: block;
  }

  .ybcs2-stage__media {
    aspect-ratio: 16 / 9;
  }

  .ybcs2-stage__meta {
    margin-top: 14px;
  }

}


/* =========================================================
   19. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ybcs2-stage,
  .ybcs2-stage__media,
  .ybcs2-stage__media img {
    transition: none !important;
  }

}

/* ===== About Us Widget 03 Style 01 ===== */
/* =========================================================
   MAIN
========================================================= */

.about-capability-section{

position:relative;
width:100%;
height:330px;

overflow:hidden;

font-family:
Inter,
Arial,
sans-serif;

color:#fff;

}


/* =========================================================
   BACKGROUND
========================================================= */

.about-capability-bg{

position:absolute;
inset:0;

background-image:url(
"/wp-content/uploads/2026/08/about-us_screen_03.webp"
);

background-size:cover;

background-position:center center;

}



.about-capability-overlay{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(5,10,16,.62),
rgba(5,10,16,.22) 50%,
rgba(5,10,16,.62)
);

}



/* =========================================================
   CONTAINER
========================================================= */


.about-capability-container{

position:relative;

z-index:2;

height:100%;

max-width:1500px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:
0 90px;

}



/* =========================================================
   LEFT RIGHT
========================================================= */


.about-capability-block{


width:360px;

}



.about-capability-left{

text-align:left;

}


.about-capability-right{

width:430px;

text-align:right;

}




/* =========================================================
   TAG
========================================================= */


.about-capability-tag{


display:inline-flex;

align-items:center;

justify-content:center;


height:32px;

padding:
0 18px;


border-radius:999px;


background:
rgba(20,22,27,.72);


font-size:11px;

font-weight:700;

letter-spacing:.12em;


margin-bottom:14px;


}



.about-capability-right 
.about-capability-tag{

margin-left:auto;

}




/* =========================================================
   TITLE
========================================================= */


.about-capability-block h2{


margin:0 0 16px;


font-size:32px;

line-height:1.05;

font-weight:500;


letter-spacing:-.02em;


}



.about-capability-block h2 span{


font-family:
Georgia,
serif;


font-style:italic;


font-weight:400;


}




/* =========================================================
   LIST
========================================================= */


.about-capability-block ul{


margin:0;

padding:0;

list-style:none;


}



.about-capability-block li{


position:relative;


font-size:14px;


line-height:1.65;


margin-bottom:4px;


}



.about-capability-left li{

padding-left:18px;

}


.about-capability-left li::before{


content:"";

position:absolute;

left:0;

top:10px;


width:5px;

height:5px;


background:#dfb96b;

border-radius:50%;

}





.about-capability-right li{


padding-right:18px;

}


.about-capability-right li::before{


content:"";

position:absolute;


right:0;

top:10px;


width:5px;

height:5px;


background:#dfb96b;

border-radius:50%;


}





/* =========================================================
   CENTER LOGO
========================================================= */


.about-capability-center{


width:260px;


display:flex;

flex-direction:column;


align-items:center;

justify-content:center;


}




.about-orbit{


width:150px;

height:150px;


border-radius:50%;


border:

1px solid rgba(220,190,130,.35);


display:flex;

align-items:center;

justify-content:center;


position:relative;


}



.about-orbit::before{


content:"";

position:absolute;


inset:14px;


border-radius:50%;


border:

1px solid rgba(255,255,255,.28);


}



.about-orbit::after{


content:"";


position:absolute;


left:-170px;

right:-170px;


height:1px;


top:50%;


background:
linear-gradient(
90deg,
transparent,
rgba(220,190,130,.45),
transparent
);


}




.about-logo-circle{


width:90px;

height:90px;


background:#fff;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


position:relative;

z-index:2;


}



.about-logo-circle img{


width:48px;

}



.about-direction{


margin-top:18px;


padding:

9px 24px;


border-radius:999px;


background:white;


color:#333;


font-size:12px;


}



/* =========================================================
   DESKTOP SMALL
========================================================= */


@media(max-width:1400px){


.about-capability-container{


padding:
0 55px;


}



.about-capability-block{


width:330px;


}



.about-capability-right{


width:390px;


}


}



/* =========================================================
   TABLET
========================================================= */


@media(max-width:1024px){


.about-capability-section{


height:300px;


}



.about-capability-container{


padding:
0 35px;


}



.about-capability-block{


width:280px;


}



.about-capability-block h2{


font-size:26px;


}



.about-capability-block li{


font-size:12px;


}



.about-capability-center{


width:180px;


}



.about-orbit{


width:120px;

height:120px;


}



.about-logo-circle{


width:72px;

height:72px;


}



.about-logo-circle img{


width:38px;


}


}



/* =========================================================
   MOBILE
========================================================= */


@media(max-width:767px){


.about-capability-section{

height:auto;

padding:
50px 20px;

}



.about-capability-container{


display:flex;

flex-direction:column;

gap:35px;


}



.about-capability-block,
.about-capability-right{


width:100%;

text-align:left;


}



.about-capability-right{


text-align:left;


}



.about-capability-right 
.about-capability-tag{


margin-left:0;


}



.about-capability-right li{


padding-left:18px;

padding-right:0;


}



.about-capability-right li::before{


left:0;

right:auto;


}



.about-capability-center{


order:2;


}


}

/* ===== About Us Widget 04 Style 01 ===== */
/* =========================================================
   01. SECTION
========================================================= */
.ybo-loop-section{
  position:relative;
  width:100%;
  background:#f5f3ef;
  overflow:hidden;
  font-family:Inter, Arial, sans-serif;
  color:#232323;
}

.ybo-loop-section,
.ybo-loop-section *{
  box-sizing:border-box;
}

/* =========================================================
   02. INNER LAYOUT
========================================================= */
.ybo-loop-inner{
  max-width:1480px;
  margin:0 auto;
  padding:54px 56px 50px;
  display:grid;
  grid-template-columns: 420px 1fr;
  align-items:center;
  column-gap:42px;
}

/* =========================================================
   03. LEFT COPY
========================================================= */
.ybo-loop-copy{
  min-width:0;
}

.ybo-loop-eyebrow{
  margin:0 0 18px;
  font-size:13px;
  line-height:1;
  font-weight:700;
  letter-spacing:.20em;
  color:#b68949;
}

.ybo-loop-title{
  margin:0;
  font-size:58px;
  line-height:.94;
  font-weight:600;
  letter-spacing:-0.04em;
  color:#141414;
}

.ybo-loop-title span{
  display:block;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.03em;
}

.ybo-loop-desc{
  max-width:355px;
  margin:30px 0 0;
  font-size:18px;
  line-height:1.65;
  font-weight:400;
  color:#8d8d8d;
}

.ybo-loop-caption{
  margin:42px 0 0;
  font-size:12px;
  line-height:1;
  font-weight:500;
  letter-spacing:.28em;
  color:#cfc5b9;
}

/* =========================================================
   04. VISUAL AREA
========================================================= */
.ybo-loop-visual{
  min-width:0;
  display:flex;
  justify-content:center;
  transform:translateX(-55px);  
}

.ybo-loop-stage{
  position:relative;
  width:620px;
  height:400px;
}

/* =========================================================
   05. SVG RINGS
========================================================= */
.ybo-loop-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

.ybo-loop-ring{
  fill:none;
}

.ybo-loop-ring--outer{
  stroke:#caa15a;
  stroke-width:1.2;
}

.ybo-loop-ring--inner{
  stroke:#dfd0bd;
  stroke-width:1.1;
  stroke-dasharray:2 5;
}

.ybo-loop-mover{
  fill:#b88534;
  stroke:#ffffff;
  stroke-width:1.6;
  filter:drop-shadow(0 0 10px rgba(184,133,52,.45));
  transition:filter .2s ease;
}

/* =========================================================
   06. CENTER BADGE
========================================================= */
.ybo-loop-center{
  position:absolute;
  left:230px;
  top:120px;
  width:160px;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.ybo-loop-center__disc{
  width:135px;
  height:135px;
  border-radius:50%;
  background:rgba(255,255,255,.56);
  box-shadow:0 8px 30px rgba(0,0,0,.035);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.ybo-loop-center__brand{
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.32em;
  color:#222;
}

.ybo-loop-center__sub{
  margin-top:12px;
  font-size:9px;
  line-height:1.7;
  font-weight:600;
  letter-spacing:.34em;
  color:#bd9960;
}

/* =========================================================
   07. NODE BASE
========================================================= */
.ybo-loop-node{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
}

.ybo-loop-node__point{
  position:absolute;
  left:-5px;
  top:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d8c6a3;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(201,155,82,.10);
  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
  z-index:6;
}

.ybo-loop-node.is-active .ybo-loop-node__point{
  background:#b88534;
  box-shadow:
    0 0 0 5px rgba(184,133,52,.18),
    0 0 16px rgba(184,133,52,.22);
  transform:scale(1.18);
}

.ybo-loop-node__content{
  position:absolute;
  z-index:5;
}

.ybo-loop-node__content h4{
  margin:0;
  font-size:16px;
  line-height:1.15;
  font-weight:600;
  color:#343434;
}


.ybo-loop-node__content p{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.42;
  font-weight:400;
  color:#a6a6a6;
}

.ybo-loop-node__eyebrow{
  margin:0 0 8px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.26em;
  color:#c09250;
}

.ybo-loop-node__eyebrow--bottom{
  margin-top:14px;
  margin-bottom:0;
}

/* active text state */
.ybo-loop-node.is-active h4{
  color:#1d1d1d;
}

.ybo-loop-node.is-active p{
  color:#8f8f8f;
}
 

/* =========================================================
   08. NODE POSITIONS
========================================================= */

/* 01 top */
.ybo-loop-node--market{
  left:310px;
  top:55px;
}
.ybo-loop-node--market .ybo-loop-node__content{
  width:250px;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  text-align:center;
}

/* 02 top-right */
.ybo-loop-node--product{
  left:429px;
  top:117px;
}
.ybo-loop-node--product .ybo-loop-node__content{
  width:230px;
  left:35px;
  top:-16px;
}

/* 03 bottom-right */
.ybo-loop-node--engineering{
  left:429px;
  top:283px;
}
.ybo-loop-node--engineering .ybo-loop-node__content{
  width:230px;
  left:30px;
  top:-16px;
}

/* 04 bottom */
.ybo-loop-node--validation{
  left:310px;
  top:345px;
}
.ybo-loop-node--validation .ybo-loop-node__content{
  width:250px;
  left:50%;
  top:15px;
  transform:translateX(-50%);
  text-align:center;
}

/* 05 bottom-left */
.ybo-loop-node--support{
  left:191px;
  top:283px;
}
.ybo-loop-node--support .ybo-loop-node__content{
  width:230px;
  right:30px;
  top:-16px;
  text-align:right;
}

/* 06 top-left */
.ybo-loop-node--feedback{
  left:191px;
  top:117px;
}
.ybo-loop-node--feedback .ybo-loop-node__content{
  width:230px;
  right:30px;
  top:-16px;
  text-align:right;
}

/* =========================================================
   09. RESPONSIVE
========================================================= */
@media (max-width: 1320px){
  .ybo-loop-inner{
    grid-template-columns:380px 1fr;
    padding:48px 36px 44px;
    column-gap:28px;
  }

  .ybo-loop-title{
    font-size:52px;
  }

  .ybo-loop-desc{
    font-size:17px;
  }

  .ybo-loop-stage{
    transform:scale(.94);
    transform-origin:center center;
  }
}

@media (max-width: 1100px){
  .ybo-loop-inner{
    grid-template-columns:1fr;
    row-gap:28px;
  }

  .ybo-loop-copy{
    max-width:620px;
  }

  .ybo-loop-visual{
    justify-content:flex-start;
  }
}

@media (max-width: 767px){
  .ybo-loop-inner{
    padding:36px 18px 32px;
  }

  .ybo-loop-title{
    font-size:42px;
  }

  .ybo-loop-desc{
    max-width:none;
    font-size:16px;
    line-height:1.7;
    margin-top:24px;
  }

  .ybo-loop-caption{
    margin-top:28px;
  }

  .ybo-loop-visual{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .ybo-loop-stage{
    min-width:620px;
    transform:none;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ybo-loop-mover,
  .ybo-loop-node__point{
    transition:none;
  }
}

/* ===== About Us Widget 05 Style 01 ===== */
.yb-quality-process{


background:#f7f5f0;

padding:80px 0;

font-family:Inter,Arial,sans-serif;


}





.ybq-container{


max-width:1450px;

margin:auto;

padding:0 55px;

display:grid;

grid-template-columns:360px 1fr;

gap:90px;

align-items:center;


}







/* LEFT */


.ybq-label{


font-size:11px;

letter-spacing:.3em;

font-weight:700;

color:#bf8f48;

margin-bottom:20px;


}



.ybq-intro h2{


font-size:52px;

line-height:.95;

letter-spacing:-.04em;

margin:0;

color:#151515;


}



.ybq-intro h2 span{


display:block;

font-family:Georgia,serif;

font-style:italic;

font-weight:400;


}




.ybq-intro p{


margin-top:32px;

font-size:16px;

line-height:1.75;

color:#888;

max-width:340px;


}




.ybq-keywords{


margin-top:40px;

font-size:11px;

letter-spacing:.3em;

color:#c6aa7d;


}


.ybq-keywords span{


margin:0 12px;


}







/* HEADER */


.ybq-header{


display:flex;

justify-content:space-between;

margin-bottom:18px;


}


.ybq-header div{


font-size:11px;

letter-spacing:.35em;

color:#c4a67c;


}



.ybq-header strong{


font-size:18px;

color:#bf8f48;


}








/* IMAGE */


/*
 * 2026-08-23 — About Us / Screen 05 image-height refinement
 *
 * Purpose:
 * - Increase the visual weight of the Quality Process image area on desktop.
 * - Keep the existing image-switching JavaScript unchanged.
 * - Keep object-fit: cover so all six process images continue to fill the frame.
 *
 * Previous desktop height: 330px
 * New desktop height:      400px
 *
 * Smaller screens receive their own reduced heights below so the image does not
 * become excessively tall on tablet/mobile.
 */
.ybq-photo{


height:400px;

position:relative;

overflow:hidden;

border-radius:22px;


}


.ybq-photo img{


width:100%;

height:100%;

object-fit:cover;

transition:

opacity .35s ease,

transform .7s ease;


}


.ybq-photo img.change{


opacity:.4;

transform:scale(1.03);


}



.ybq-photo-mask{


position:absolute;

inset:0;

background:

linear-gradient(

0deg,

rgba(0,0,0,.58),

transparent 65%

);


}





.ybq-photo-text{


position:absolute;

left:35px;

bottom:28px;

color:white;


}



#ybNumber{


font-size:13px;

letter-spacing:.25em;

color:#d5a052;

margin-bottom:10px;


}



.ybq-photo-text h3{


font-size:38px;

font-weight:500;

margin:0 0 8px;

letter-spacing:-.03em;


}



.ybq-photo-text p{


margin:0;

font-size:15px;

color:rgba(255,255,255,.85);


}









/* TIMELINE */


.ybq-timeline{


position:relative;

margin-top:48px;


}




.ybq-progress-line{


position:absolute;

top:8px;

left:0;

right:0;

height:1px;

background:#dec9a4;


}



#ybProgress{


height:100%;

width:0;

background:#bf8f48;

transition:.45s ease;


}






#ybRunner{


position:absolute;

top:8px;

left:8.33%;


width:11px;

height:11px;


border-radius:50%;

background:#bf8f48;


transform:translate(-50%,-50%);


box-shadow:

0 0 0 6px rgba(191,143,72,.18);


transition:.45s cubic-bezier(.4,0,.2,1);


z-index:5;


}





.ybq-nodes{


display:grid;

grid-template-columns:repeat(6,1fr);

position:relative;


}





.ybq-node{


text-align:center;

position:relative;

padding-top:28px;

cursor:pointer;


}




.ybq-node span{


position:absolute;

top:2px;

left:50%;

transform:translateX(-50%);


width:10px;

height:10px;


border-radius:50%;


background:#eadfc8;

border:2px solid white;


transition:.3s;


}





.ybq-node.active span{


background:#bf8f48;


box-shadow:

0 0 0 5px rgba(191,143,72,.15);


}





.ybq-node small{


display:block;

font-size:10px;

letter-spacing:.3em;

color:#bf8f48;


}



.ybq-node h4{


margin:10px auto 0;


font-size:15px;


line-height:1.35;


font-weight:600;


max-width:130px;


color:#333;


}




.ybq-node.active h4{


color:#bf8f48;


}







@media(max-width:1100px){


.ybq-container{

grid-template-columns:1fr;

}


/*
 * Tablet refinement:
 * keep the enlarged visual presence, but reduce it slightly from desktop.
 */
.ybq-photo{

height:360px;

}


}


/*
 * Mobile refinement:
 * the process image remains prominent without occupying most of the viewport.
 */
@media(max-width:767px){


.ybq-photo{

height:300px;

border-radius:18px;

}


}

/* ===== About Us Widget 06 Style 01 ===== */
.yb-global-partnership{


background:#f7f5f0;

padding:20px 0 75px;

font-family:Inter,Arial,sans-serif;


}



.yb-global-wrap{


max-width:1450px;

margin:auto;

padding:0 50px 15px;


display:grid;

grid-template-columns:

280px

1fr

200px;


gap:35px;


align-items:center;

transform:translateY(15px);


}






/* LEFT */


.yb-global-label{


font-size:10px;

letter-spacing:.38em;

font-weight:700;

color:#bd8d45;

margin-bottom:16px;


}




.yb-global-left h2{


font-size:38px;

line-height:1.05;

letter-spacing:-.045em;

margin:0;

color:#151515;


}




.yb-global-left h2 span{


font-family:Georgia,serif;

font-style:italic;

font-weight:400;


}




.yb-global-left p{


margin-top:24px;

max-width:290px;

font-size:14px;

line-height:1.75;

color:#888;


}




.yb-global-left a{


margin-top:24px;

display:block;

font-size:14px;

font-weight:600;

color:#31483b;


}







/* MAP */


.yb-global-map{


position:relative;


}



.yb-map-label{


text-align:center;

font-size:10px;

letter-spacing:.4em;

color:#c7ae82;

margin-bottom:8px;


}



.yb-map-box{


height:240px;

position:relative;


}




.yb-map-svg{


width:100%;

height:100%;

object-fit:contain;


opacity:.10;

filter:
grayscale(1)
brightness(1.15);

transform:translateY(-8px);


}









/* POINTS */


.yb-point{


position:absolute;

width:8px;

height:8px;

border-radius:50%;

transform:translate(-50%,-50%);

animation:
ybPulse 3s infinite;


}


@keyframes ybPulse{


0%{

box-shadow:
0 0 0 0 rgba(200,140,60,.35);

}


70%{

box-shadow:
0 0 0 12px rgba(200,140,60,0);

}


100%{

box-shadow:
0 0 0 0 rgba(200,140,60,0);

}


}



.yb-point:after{


content:"";

position:absolute;

inset:-6px;

border-radius:50%;


}



.stable{

background:#587b69;

}


.stable:after{

background:rgba(88,123,105,.18);

}




.project{

background:#ce8738;

}


.project:after{

background:rgba(206,135,56,.18);

}






/* MAP POSITION */


.usa{

left:22%;

top:46%;

}



.turkey{

left:61%;

top:43%;

}



.thailand{

left:70%;

top:52%;

}



.vietnam{

left:73%;

top:56%;

}



.indonesia{

left:72%;

top:67%;

}



.philippines{

left:77%;

top:54%;

}









/* RIGHT */


.yb-info{


margin-bottom:32px;


}



.yb-info h3{


font-size:11px;

letter-spacing:.25em;

font-weight:700;

margin:0 0 15px;

color:#222;


}




.yb-info ul{


list-style:none;

padding:0;

margin:0;


}



.yb-info li{


font-size:14px;

color:#777;

margin:11px 0;

padding-left:17px;

position:relative;


}




.yb-info li:before{


content:"";

width:5px;

height:5px;

border-radius:50%;

background:#587b69;


position:absolute;

left:0;

top:7px;


}




.yb-info .project-list li:before{


background:#ce8738;


}




@media(max-width:1100px){


.yb-global-wrap{


grid-template-columns:1fr;


}


}

/* ===== About Us Widget 07 Style 01 ===== */
.yb-closing{


background:#f7f5f0;

padding:20px 0 55px;
margin-top:-35px;

font-family:
Inter,
Arial,
sans-serif;

border-bottom:1px solid rgba(0,0,0,.05);

}




.yb-closing-wrap{


margin:auto;

max-width:1800px;

padding:0 20px;


}




.yb-closing-image{


height:500px;

position:relative;

overflow:hidden;

border-radius:0;


}






.yb-closing-image img{


width:100%;

height:100%;

object-fit:cover;


transform:scale(1.04);


animation:

ybZoom 12s ease forwards;


}




@keyframes ybZoom{


from{

transform:scale(1.08);

}

to{

transform:scale(1);

}


}








.yb-closing-overlay{


position:absolute;

inset:0;


background:

linear-gradient(

90deg,

rgba(0,0,0,.48),

rgba(0,0,0,.22) 45%,

rgba(0,0,0,.08)

);


}









.yb-closing-content{


position:absolute;

left:65px;

top:45%;


transform:translateY(-50%);


max-width:470px;


color:white;


}





.yb-closing-label{


font-size:10px;

letter-spacing:.38em;

font-weight:700;

color:#d4aa6b;

margin-bottom:18px;


}







.yb-closing-content h2{


font-size:62px;

line-height:.95;

letter-spacing:-.045em;

font-weight:500;

margin:0;


}





.yb-closing-content h2 span{


font-family:Georgia,serif;

font-style:italic;

font-weight:400;


}







.yb-closing-content p{


margin-top:25px;


font-size:15px;

line-height:1.65;


max-width:390px;


color:

rgba(255,255,255,.85);


}







.yb-closing-btn{


display:inline-flex;

align-items:center;

gap:14px;


margin-top:30px;


padding:12px 24px;


background:#304b3d;


color:#fff;


border-radius:25px;


font-size:13px;

font-weight:600;


text-decoration:none;


transition:.35s;


}




.yb-closing-btn:hover{


background:#456653;

transform:translateY(-3px);


}







.yb-closing-meta{


position:absolute;

right:55px;

bottom:35px;


display:flex;

gap:55px;


color:white;


}





.yb-closing-meta div{


display:flex;

flex-direction:column;

gap:6px;


}



.yb-closing-meta small{


font-size:9px;

letter-spacing:.28em;

color:#d4aa6b;


}




.yb-closing-meta strong{


font-size:12px;

font-weight:400;

color:

rgba(255,255,255,.85);


}









@media(max-width:900px){


.yb-closing{


padding:35px 20px;

}



.yb-closing-wrap{

padding:0;

}


.yb-closing-image{

height:520px;

}



.yb-closing-content{

left:30px;

right:25px;

}



.yb-closing-content h2{

font-size:42px;

}


.yb-closing-meta{

display:none;

}



}


/* ==========================================================================
   Stage 3X.1 — About Us responsive corrective

   Corrective goals:
   - Preserve the animated Optical Development Loop on tablet and mobile.
   - Centre the loop on tablet instead of inheriting the desktop -55px offset.
   - On phones keep the original animated diagram available through horizontal
     scrolling rather than replacing it with static cards.
   - Keep the plugin-local map, but make the map box exactly 2:1 so marker
     percentages and the SVG share the same coordinate plane.
   - Recalibrate country markers to the local equirectangular world map.
   ========================================================================== */

/* --------------------------- Development Loop: shared -------------------- */
@media (max-width: 1100px) {
    .ybo-loop-inner {
        grid-template-columns: 1fr !important;
        row-gap: 26px !important;
        padding: 44px 30px 42px !important;
    }

    .ybo-loop-copy {
        width: 100% !important;
        max-width: 760px !important;
        margin-inline: auto !important;
    }

    .ybo-loop-desc {
        max-width: 650px !important;
    }

    .ybo-loop-visual {
        width: 100% !important;
        justify-content: center !important;
        transform: none !important;
    }
}

@media (min-width: 600px) and (max-width: 749px) {
    .ybo-loop-visual {
        min-height: 320px !important;
        overflow: visible !important;
    }

    .ybo-loop-stage {
        transform: scale(.72) !important;
        transform-origin: center center !important;
    }
}

@media (min-width: 750px) and (max-width: 899px) {
    .ybo-loop-visual {
        min-height: 355px !important;
        overflow: visible !important;
    }

    .ybo-loop-stage {
        transform: scale(.82) !important;
        transform-origin: center center !important;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    .ybo-loop-visual {
        min-height: 390px !important;
        overflow: visible !important;
    }

    .ybo-loop-stage {
        transform: scale(.90) !important;
        transform-origin: center center !important;
    }
}

/* Phones: preserve the animated orbit in a touch-scroll viewport. */
@media (max-width: 599px) {
    .ybo-loop-section {
        overflow: hidden !important;
    }

    .ybo-loop-inner {
        padding: 36px 18px 34px !important;
        row-gap: 20px !important;
    }

    .ybo-loop-title {
        font-size: clamp(38px, 11vw, 44px) !important;
    }

    .ybo-loop-desc {
        max-width: none !important;
        margin-top: 22px !important;
        font-size: 15.5px !important;
    }

    .ybo-loop-caption {
        margin-top: 26px !important;
    }

    .ybo-loop-visual {
        display: flex !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 0 72px 12px !important;
        margin-inline: -18px !important;
        scroll-padding-inline: 72px !important;
        -webkit-overflow-scrolling: touch;
    }

    .ybo-loop-stage {
        flex: 0 0 620px !important;
        width: 620px !important;
        min-width: 620px !important;
        height: 400px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .ybo-loop-svg {
        display: block !important;
    }
}

/* --------------------------- Global Partnership map ---------------------- */
.yb-map-box {
    isolation: isolate;
    width: 100%;
    height: auto !important;
    aspect-ratio: 2 / 1;
}

.yb-map-svg {
    display: none !important;
}

.yb-map-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        url("../../images/world-map-low-resolution.svg")
        center center /
        100% 100%
        no-repeat;
    opacity: .20;
    pointer-events: none;
}

.yb-point {
    z-index: 2;
}

/* Marker coordinates recalibrated for the plugin-local equirectangular map. */
.usa { left: 22.2% !important; top: 29.0% !important; }
.turkey { left: 59.7% !important; top: 28.5% !important; }
.thailand { left: 78.1% !important; top: 41.8% !important; }
.vietnam { left: 80.0% !important; top: 41.2% !important; }
.indonesia { left: 82.8% !important; top: 51.2% !important; }
.philippines { left: 83.9% !important; top: 42.8% !important; }

@media (max-width: 1100px) {
    .yb-global-partnership {
        padding: 28px 0 58px !important;
    }

    .yb-global-wrap {
        width: 100% !important;
        max-width: 820px !important;
        margin-inline: auto !important;
        padding: 0 32px 10px !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: start !important;
        transform: none !important;
    }

    .yb-global-left {
        width: 100% !important;
        max-width: 640px !important;
    }

    .yb-global-left p {
        max-width: 580px !important;
    }

    .yb-global-map {
        width: 100% !important;
        max-width: 760px !important;
        margin: 12px auto 0 !important;
    }

    .yb-global-right {
        width: 100% !important;
        max-width: 760px !important;
        margin-inline: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
    }

    .yb-info {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 599px) {
    .yb-global-wrap {
        max-width: none !important;
        padding: 0 20px 8px !important;
        gap: 18px !important;
    }

    .yb-global-left h2 {
        font-size: clamp(34px, 10vw, 42px) !important;
    }

    .yb-global-left p {
        margin-top: 18px !important;
    }

    .yb-global-map {
        margin-top: 8px !important;
    }

    .yb-map-box::before {
        opacity: .24;
    }

    .yb-global-right {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}