/* Our Engagement page — single-viewport layout measured proportionally from the
   client mock-up on the locked template scene (colours preserved). */

.eng-body{background:#ded0c2}
.eng{
  position:relative;overflow:hidden;
  background:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain.webp') center top / 100% auto no-repeat,
    #ded0c2;
}
.eng__inner{max-width:1440px;margin:0 auto;padding:124px 150px 30px;position:relative}
.pink{color:var(--accent)}

/* Top row ------------------------------------------------------ */
.eng__top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.eng__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.eng__eyebrow-rule{display:block;width:52px;height:2px;margin-top:10px;background:var(--accent)}
.eng__title{
  margin:20px 0 0;font-size:42px;line-height:1.2;letter-spacing:-.01em;
  font-weight:var(--fw-bold);color:var(--text-heading);
}
.eng__rule{display:block;width:46px;height:3px;margin-top:16px;background:var(--accent)}
.eng__lede{margin:16px 0 0;font-size:16px;line-height:1.55;color:var(--text-heading)}
.eng__ambition{text-align:left;padding-top:66px}
.eng__ambition-line1{margin:0;font-size:26px;font-weight:var(--fw-bold);color:var(--text-heading)}
.eng__ambition-line2{margin:4px 0 0;font-size:26px;font-weight:var(--fw-bold);color:var(--accent)}
.eng__ambition-rule{display:block;width:52px;height:2px;margin-top:14px;background:var(--accent)}

/* Engagement grid ---------------------------------------------- */
.egrid{position:relative;margin-top:34px;display:flex;flex-direction:column;gap:14px}
.erow{
  display:grid;grid-template-columns:180px 1fr 1fr 1fr;gap:14px;
  align-items:stretch;
}
.erow__label{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-left:36px;
}
.erow__label span:first-child{
  font-size:25px;font-weight:var(--fw-bold);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-heading);
}
.erow__rule{display:block;width:46px;height:3px;margin-top:10px;background:var(--accent)}
/* Pink spine, per the mock: a vertical line in the gutter with a horizontal
   arm reaching into each row's first card, a corner at EXPLORE and node dots
   at BUILD and EMBED. Built per row so it tracks whatever height rows take. */
.erow{position:relative}
.erow::after{                      /* vertical segment */
  content:"";position:absolute;left:166px;width:2px;background:var(--accent);z-index:0;
}
.erow:nth-of-type(1)::after{top:calc(50% - 1px);bottom:-7px}
.erow:nth-of-type(2)::after{top:-7px;bottom:-7px}
.erow:nth-of-type(3)::after{top:-7px;height:calc(50% + 8px)}
.erow::before{                     /* arm into the cards */
  content:"";position:absolute;left:166px;top:calc(50% - 1px);
  width:28px;height:2px;background:var(--accent);z-index:0;
}
.erow__node{
  position:absolute;left:159px;top:calc(50% - 8px);
  width:16px;height:16px;border-radius:50%;background:var(--accent);z-index:1;
}

.ecard{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:18px;
  padding:20px 20px;
  background:linear-gradient(180deg,#f9f3ea,#f4ece1);
  border-radius:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 22px -14px rgba(38,38,38,.26),0 0 0 1px rgba(38,38,38,.04);
}
.ecard__icon{flex:0 0 auto;color:var(--text-heading)}
.ecard__title{
  margin:0;font-size:14px;line-height:1.25;font-weight:var(--fw-bold);
  letter-spacing:.03em;text-transform:uppercase;color:var(--text-heading);
}
.ecard__body{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:var(--text-body)}

/* Bottom band -------------------------------------------------- */
.eband{
  display:flex;align-items:center;gap:36px;
  margin-top:18px;
  padding:24px 40px;
  background:linear-gradient(180deg,#f9f3ea,#f4ece1);
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 10px 22px -14px rgba(38,38,38,.26),0 0 0 1px rgba(38,38,38,.04);
}
.eband__left{flex:0 0 auto}
.eband__left p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text-heading)}
.eband__left p:last-child{font-weight:var(--fw-semibold)}
.eband__main{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px}
.eband__title{margin:0;font-size:27px;font-weight:var(--fw-bold);color:var(--text-heading)}
.eband__formula{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.fitem{display:inline-flex;align-items:center;gap:8px;color:var(--text-heading)}
.fitem__label{
  font-size:10.5px;font-weight:var(--fw-semibold);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-heading);
}
.fop{font-size:24px;font-weight:var(--fw-semibold);color:var(--accent)}

/* Footer ------------------------------------------------------- */
.eng__footer{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:24px;
}
.eng__footer-brand{color:var(--text-heading);font-size:13px}
.eng__tagline{
  position:relative;margin:0;
  font-size:18px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading);
  white-space:nowrap;
}
.eng__tagline .tagline__human{position:relative;display:inline-block}
.eng__tagline .tagline__human::after{
  content:"";position:absolute;left:0;bottom:-9px;
  width:calc(100% - 24px);height:2px;background:var(--accent);
}
.eng__tagline .tagline__ai{color:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .eng__inner{padding:124px 44px 28px}
}
@media (max-width:1180px){
  .eng__top{flex-direction:column;gap:28px}
  .eng__ambition{padding-top:0}
  .erow{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .erow__label{grid-column:1 / -1;padding-left:0;flex-direction:row;align-items:center;gap:16px}
  .erow__rule{margin-top:0}
  .erow::before,.erow::after,.erow__node{display:none}
  .eband{flex-direction:column;align-items:flex-start;gap:20px}
}
@media (max-width:720px){
  .eng__inner{padding:118px 24px 40px}
  .eng__lede br{display:none}
  .eng__title{font-size:clamp(30px,7.5vw,42px)}
  .erow{grid-template-columns:1fr}
  .eband__title{font-size:22px;text-align:center}
  .eng__footer{flex-direction:column;gap:26px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}

/* MOBILE SCENE: the 1672px render is 3-4x wider than a phone needs; serve the
   900px variant below the tablet breakpoint. Position/size/repeat carry over
   from the shorthand above — only the image layers are swapped. */
@media (max-width:820px){
  .eng{background-image:
    linear-gradient(to bottom,rgba(222,208,194,0) 0,rgba(222,208,194,0) 50vw,#ded0c2 57vw),
    url('../assets/img/room-plain-mobile.webp');}
}