/* Our Values page — single-viewport layout measured proportionally from the
   client mock-up (1536×1024 → 1440×960 design canvas). Tokens from the design system. */

.values-body{background:var(--surface-page)}
.values{
  position:relative;overflow:hidden;
  min-height:960px;
  background:url('../assets/img/room.webp') left bottom / cover no-repeat var(--surface-page);
}
.values__inner{
  position:relative;
  display:flex;flex-direction:column;
  max-width:1440px;min-height:960px;
  margin:0 auto;padding:138px 95px 62px;
}
.pink{color:var(--accent)}

/* Eyebrow (top-left) ------------------------------------------- */
.values__eyebrow{
  position:absolute;left:115px;top:140px;margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.values__eyebrow-rule{display:block;width:64px;height:2px;margin-top:10px;background:var(--accent)}

/* Centred heading block ---------------------------------------- */
.values__head{text-align:center;margin-top:44px}
.values__title{
  margin:0;font-size:72px;line-height:1.1;letter-spacing:-.01em;
  font-weight:var(--fw-semibold);color:var(--text-heading);
}
.values__rule{display:inline-block;width:60px;height:3px;background:var(--accent)}
.values__head .values__rule{margin-top:20px}
.values__sub{margin:22px 0 0;font-size:21px;line-height:1.55;color:var(--text-body)}

/* CLARITY card row --------------------------------------------- */
.vcards{
  display:flex;gap:11px;
  margin-top:56px;
}
.vcard{
  position:relative;flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;
  padding:26px 10px 30px;
  background:var(--surface-card);
  border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
  text-align:center;
}
/* pink connector segments between cards, at letter height */
.vcard + .vcard::before{
  content:"";position:absolute;left:-12px;top:51px;width:12px;height:2px;
  background:var(--accent);
}
.vcard__letter{
  font-size:46px;line-height:1;font-weight:var(--fw-semibold);
  letter-spacing:.01em;color:var(--text-heading);
}
.vcard__icon{margin-top:26px;color:var(--text-heading)}
.vcard__rule{display:block;width:34px;height:2px;margin-top:18px;background:var(--accent)}
.vcard__title{margin:16px 0 0;font-size:20px;line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-heading)}
.vcard__body{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-body)}

/* Closing paragraph -------------------------------------------- */
/* Horizontal panel carrying the closing passage — same surface treatment as
   the CLARITY cards above, with the pink rule beneath the text */
.values__close{
  display:flex;flex-direction:column;align-items:center;
  margin-top:44px;padding:30px 40px 32px;
  background:var(--surface-card);
  border-radius:var(--radius-card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
  text-align:center;
}
.values__close p{margin:0;font-size:16.5px;line-height:1.6;color:var(--text-body)}
.values__close .values__rule{margin-top:22px}

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

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .values__inner{padding:136px 40px 56px}
  .values__eyebrow{left:48px;top:132px}   /* clears the header capsule */
  .vcards{flex-wrap:wrap;justify-content:center}
  .vcard{flex:0 1 220px;min-width:186px}
  .vcard + .vcard::before{display:none}
  .values__title{font-size:clamp(44px,5.5vw,72px)}
}
@media (max-width:760px){
  /* below the capsule the absolute eyebrow becomes part of the flow */
  .values__eyebrow{position:static;margin-bottom:26px}
  .values{min-height:0;background:
    linear-gradient(to bottom,rgba(233,225,212,0) 0,rgba(233,225,212,0) 38vw,#e9e1d4 62vw),
    url('../assets/img/room-mobile.webp') center top / 100% auto no-repeat,
    #e9e1d4}
  .values__inner{min-height:0;padding:130px 24px 48px}
  .values__head{margin-top:24px}
  .values__sub br,.values__close br{display:none}
  .values__close{padding:26px 22px 28px}
  .values__sub{font-size:17px}
  .vcard{flex:1 1 100%;max-width:340px}
  .values__footer{flex-direction:column;gap:28px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}