/* Our Belief page — layout measured proportionally from the client mock-up
   (attachment scaled to the 1440px design canvas). Tokens from the design system. */

.belief-body{background:#e1cbb9}
.belief{
  position:relative;overflow:hidden;
  /* client-supplied plinth scene, colours preserved; fade matched to its floor tone */
  background:
    linear-gradient(to bottom,rgba(225,203,185,0) 0,rgba(225,203,185,0) 50vw,#e1cbb9 57vw),
    url('../assets/img/room-plinth.webp') center top / 100% auto no-repeat,
    #e1cbb9;
}
.belief__inner{max-width:1440px;margin:0 auto;padding:186px 95px 96px;position:relative}
.pink{color:var(--accent)}
.pink-stroke{color:var(--accent)}

/* Heading ------------------------------------------------------ */
/* The scene is drawn at 100% width, so its step edge always falls at a fixed
   fraction of the viewport width: image height = 56.28vw, step foot at 93.2%
   of that = 52.45vw. Reserving that height keeps the first card below the step. */
.belief__head{
  margin-left:120px;
  min-height:calc(52.45vw - 258px);   /* +16px clearance below the step */
}
.belief__title{
  margin:0;font-size:76px;line-height:1.08;letter-spacing:-.01em;
  font-weight:var(--fw-semibold);color:var(--text-heading);
}
.accent-rule--wide{width:100px;margin-top:26px}

/* Cards -------------------------------------------------------- */
.bcard{
  position:relative;z-index:1;
  display:flex;gap:40px;
  background:var(--surface-card);
  border-radius:28px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 0 0 1px rgba(38,38,38,.05),var(--shadow-card);
  padding:78px 88px;
}
.bcard--belief{margin:88px 0 0 120px}
.bcard--vision,.bcard--mission{margin:0}
.bcard__text{flex:0 0 auto}
.bcard__eyebrow{
  margin:0;
  font:var(--text-eyebrow);font-size:13px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--accent);
}
.bcard__rule{display:block;width:46px;height:3px;margin-top:12px;background:var(--accent)}
.bcard__para{margin:26px 0 0;max-width:322px;font-size:19px;line-height:1.65;color:var(--text-heading)}

/* Shared diagram bits ----------------------------------------- */
.diagram-label{
  font-family:var(--font-sans);font-size:11px;font-weight:var(--fw-semibold);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-heading);
  text-align:center;line-height:1.45;
}

/* Spine between cards ----------------------------------------- */
.spine{display:block;width:2px;background:var(--accent);margin:0 auto;height:0}
.bcard--belief + .spine{height:128px;margin-left:calc(50% + 8px)}
.bcard--vision + .spine{height:75px;margin-left:calc(50% + 8px)}

/* Card 1: Venn + drops ---------------------------------------- */
.bcard--belief .bcard__text{padding-top:24px}
.venn{position:relative;flex:1;min-width:620px;height:530px;margin-left:8px}
.venn__circle{
  position:absolute;top:0;width:250px;height:250px;border-radius:50%;
  border:1.5px solid rgba(38,38,38,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--text-heading);
}
.venn__circle--l{left:34px}
.venn__circle--r{left:304px}
.venn__dot{position:absolute;left:287px;top:118px;width:14px;height:14px;border-radius:50%;background:var(--accent)}
.venn__stem{position:absolute;left:293px;top:132px;width:2px;height:198px;background:var(--accent)}
.venn__branch{position:absolute;left:94px;top:330px;width:400px;height:2px;background:var(--accent)}
.venn__drop{position:absolute;top:330px;width:2px;height:34px;background:var(--accent)}
.venn__drop--1{left:93px}
.venn__drop--2{left:293px}
.venn__drop--3{left:493px}
.venn__leaf{
  position:absolute;top:382px;width:190px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:var(--text-heading);
}
.venn__leaf--1{left:-1px}
.venn__leaf--2{left:199px}
.venn__leaf--3{left:399px}

/* Card 2: Vision ---------------------------------------------- */
.bcard--vision .bcard__text{width:470px}
.vision__h2{
  margin:30px 0 0;font-size:42px;line-height:1.16;letter-spacing:-.005em;
  font-weight:var(--fw-semibold);color:var(--text-heading);
}
.vision__h2 + .bcard__rule{margin-top:22px}
.vision__lede{margin:24px 0 0;font-size:14px;line-height:1.6;color:var(--text-heading)}
.vision__list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:17px}
.vision__list li{display:flex;align-items:center;gap:14px;font-size:13.5px;line-height:1.5;color:var(--text-heading)}
.vision__list svg{flex:0 0 auto;color:var(--accent)}
.vision__close{margin:30px 0 0;max-width:400px;font-size:14px;line-height:1.6;color:var(--text-heading)}
.vision__tag{margin:34px 0 0;font-size:21px;font-weight:var(--fw-bold);color:var(--text-heading)}

.plaque{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:660px}
/* client-supplied double-oval rings (transparent cut-out) — the card colour
   shows through the interior, live icons and hairlines overlaid in the hole */
.plaque__frame{position:relative;width:540px}
.plaque__art{display:block;width:100%;height:auto}
.plaque__hole{position:absolute;left:22.14%;top:20.89%;width:56.16%;height:56.31%}
.plaque__axis{position:absolute;background:rgba(38,38,38,.30)}
.plaque__axis--v{left:50%;top:5%;bottom:5%;width:1px}
.plaque__axis--h{top:50%;left:3%;right:3%;height:1px}
.plaque__q{position:absolute;color:var(--text-heading)}
.plaque__q--tl{left:26%;top:27%;transform:translate(-50%,-50%)}
.plaque__q--tr{left:74%;top:27%;transform:translate(-50%,-50%)}
.plaque__q--bl{left:26%;top:73%;transform:translate(-50%,-50%)}
.plaque__q--br{left:74%;top:73%;transform:translate(-50%,-50%)}

/* Card 3: Mission orbital ------------------------------------- */
.bcard--mission .bcard__text{width:462px;padding-top:6px}
.mission__h2{
  margin:30px 0 0;font-size:40px;line-height:1.3;letter-spacing:-.005em;
  font-weight:var(--fw-semibold);color:var(--text-heading);
}
.orbit{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}
.orbit__svg{width:620px;max-width:100%;height:auto;aspect-ratio:620/470;color:var(--text-heading)}
.orbit__ellipse{fill:none;stroke:rgba(38,38,38,.4);stroke-width:1.5}
.orbit__link{stroke:rgba(38,38,38,.35);stroke-width:1}
.orbit__dashed{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 7}
.orbit__pip{fill:var(--accent)}
.orbit__node{fill:var(--surface-card);stroke:rgba(38,38,38,.5);stroke-width:1.5}

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

/* Vertical rhythm between cards (spine elements sit in the gaps) */
.bcard--vision{margin-top:0}
.bcard--mission{margin-top:0}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .belief__inner{padding:170px 48px 80px}
  .belief__head,.bcard--belief{margin-left:0}
  .bcard{padding:60px 56px}
}
@media (max-width:1199px){
  .bcard{flex-direction:column;gap:48px}
  .bcard--vision .bcard__text,.bcard--mission .bcard__text{width:auto;max-width:520px}
  /* the Venn is a fixed-geometry diagram: scale it as a unit and reclaim the
     unscaled layout box with negative margins (--s must stay unitless) */
  .venn{
    --s:.86;
    flex:none;width:620px;min-width:620px;height:530px;margin-left:0;
    transform:scale(var(--s));transform-origin:top left;
    margin-right:calc(620px * (var(--s) - 1));
    margin-bottom:calc(530px * (var(--s) - 1));
  }
  .plaque{min-height:560px}
  .plaque__frame{width:440px}
  .orbit__svg{max-width:100%;height:auto}
}
@media (max-width:900px){
  .venn{--s:.72}
}
@media (max-width:760px){
  .venn{--s:.60}
  .belief__title{font-size:clamp(44px,10vw,64px)}
  .bcard{padding:44px 28px}
  .plaque{min-height:430px}
  .plaque__frame{width:330px}
  .plaque__q svg,.plaque__q{width:44px;height:44px}
  .vision__h2{font-size:32px}
  .mission__h2{font-size:29px}
  .vision__lede br{display:none}
  .belief__footer{flex-direction:column;gap:28px;align-items:flex-start}
}
@media (max-width:560px){
  .venn{--s:.46}
}
@media (max-width:430px){
  .venn{--s:.38}
}

/* 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){
  .belief{background-image:
    linear-gradient(to bottom,rgba(225,203,185,0) 0,rgba(225,203,185,0) 50vw,#e1cbb9 57vw),
    url('../assets/img/room-plinth-mobile.webp');}
}