/* Torilab — Our Promise (page-our-promise.php). Dùng chung home.css + company.css + careers.css; file này chỉ thêm phần riêng. */
.op-hero h1{max-width:21ch}
.op-hero h1 span{white-space:normal;display:block}
.op-hero .cm-hero-bg img{object-position:50% 50%}

/* 2 · What We Expect — 2 cột: tiêu đề trái, nội dung phải */
.op-ex{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:stretch}
.op-ex-l{display:flex;flex-direction:column}
.op-ex-ph{position:relative;flex:1;min-height:260px;margin:clamp(28px,3vw,44px) 0 0;border-radius:calc(var(--r) - 8px);overflow:hidden;background:var(--surf)}
.op-ex-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.op-ex-l h2{margin-top:24px}
.op-ex-l .kick{padding-left:14px;align-self:flex-start}
.op-ex-r{display:flex;flex-direction:column;gap:20px}
.op-ex-r>p:not(.lead){color:var(--ink-2);line-height:1.7;font-size:clamp(15px,1.05vw,17px)}
.op-ex-r .lead{max-width:none;color:#fff}
.op-qt{margin:clamp(12px,1.6vw,24px) 0 0;padding:clamp(24px,2.6vw,36px);border-radius:0 calc(var(--r) - 8px) calc(var(--r) - 8px) 0;background:var(--surf);border-left:3px solid var(--lime)}
.op-qt h3{font-size:clamp(24px,2vw,32px);letter-spacing:-.03em;line-height:1.15;color:var(--lime)}
.op-qt p{margin-top:14px;color:var(--ink-2);line-height:1.65}

/* 3 · The Virtuous Cycle — 5 bước nối bằng đường, chấm sáng chạy dọc đường */
.op-cy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);position:relative}
.op-cy li{position:relative;background:var(--card);border-radius:var(--r);padding:clamp(20px,1.8vw,26px) clamp(20px,2vw,28px) clamp(22px,2vw,28px);display:flex;flex-direction:column;gap:clamp(20px,2.2vw,32px);min-height:clamp(150px,11.5vw,180px)}
.op-cy li:not(:last-child)::after{content:"→";position:absolute;z-index:2;top:50%;right:calc(-1 * clamp(10px,1.2vw,16px) / 2);transform:translate(50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--bg,#070807);color:var(--lime);font-size:14px;border:1px solid var(--line)}
.op-cn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--surf);color:#fff;font-size:15px;transition:background .4s,color .4s,box-shadow .4s}
.op-cy li h3{margin-top:auto;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.02em;line-height:1.2}
.op-cy li:last-child{background:var(--lime);color:var(--ink)}
.op-cy li:last-child .op-cn{background:var(--ink);color:var(--lime)}
/* lần lượt sáng từng bước (vòng lặp) */
.op-cy.in li .op-cn{animation:opStep 7.5s infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes opStep{0%,18%{background:var(--lime);color:var(--ink);box-shadow:0 0 0 6px rgba(204,255,102,.14)}22%,100%{}}
.op-cy li:last-child .op-cn{animation:none}

/* 4 · Our Commitment — 4 cột trên nền ảnh */
.op-cmg{grid-template-columns:repeat(4,minmax(0,1fr))}
.op-cm .car-h{margin-bottom:clamp(32px,4vw,56px)}

/* 5 · What We Believe — ảnh vòm + 3 ý */
@media (min-width:1101px){.op-bl .cm-in-ph{min-height:600px}}
.op-bl .cm-in-r h2{margin-top:24px}
.op-bll{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.op-bll article{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,28px);padding:clamp(22px,2.2vw,30px) 0;border-bottom:1px solid var(--line)}
.op-bll article:last-child{border-bottom:0;padding-bottom:0}
.op-bn{font-size:12px;letter-spacing:.12em;color:var(--lime);padding-top:6px}
.op-bll h3{font-size:clamp(21px,1.7vw,26px);letter-spacing:-.02em;line-height:1.2}
.op-bll p{margin-top:10px;color:var(--ink-2);line-height:1.65;max-width:58ch}

/* 6 · Join — chỉ tiêu đề + nút */
.op-page .cm-ct{grid-template-columns:1fr}
.op-page .cm-ct h2 span{color:inherit;display:block}

@media (max-width:1100px){
  .op-ex{grid-template-columns:1fr}
  .op-ex-ph{flex:none;min-height:0;aspect-ratio:4/3}
  .op-cy{grid-template-columns:1fr 1fr}
  .op-cy li:last-child{grid-column:1/-1}
  .op-cy li:not(:last-child)::after{display:none}
  .op-cmg{grid-template-columns:1fr 1fr}
  .op-cmg .car-pc:nth-child(3){border-left:0;padding-left:0}
  .op-cmg .car-pc:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18);margin-top:clamp(24px,3vw,36px)}
}
@media (max-width:720px){
  .op-cy{grid-template-columns:1fr}
  .op-cy li{min-height:0;flex-direction:row;align-items:center;gap:18px;padding:20px}
  .op-cy li h3{margin-top:0}
  .op-cn{flex:none;width:44px;height:44px}
  .op-cmg{grid-template-columns:1fr}
  .op-cmg .car-pc:nth-child(n+2){margin-top:0}
}
@media (prefers-reduced-motion:reduce){.op-cy.in li .op-cn{animation:none}}

/* Mobile: phần trên ảnh hero Our Promise sáng hơn (giảm lớp phủ tối phía trên, giữ tối vùng chữ phía dưới) */
@media (max-width:720px){
  .op-hero .cm-hero-bg img{filter:saturate(.95) contrast(1.04) brightness(1.06)}
  .op-hero.cm-hero::before{background:linear-gradient(180deg,rgba(7,8,7,0) 0%,rgba(7,8,7,0) 34%,rgba(7,8,7,.8) 58%,#070807 100%)}
  .op-hero.hero4::after{background:linear-gradient(180deg,rgba(7,8,7,.3) 0%,rgba(7,8,7,0) 14%,rgba(7,8,7,0) 55%,rgba(7,8,7,.92) 100%)}
}