/* ============================================================================
   Intelligencia — a service's own page (landing pages, web applications, CMS,
   event management, exhibition games, the two LMS, modular content, detail
   aids). Built on the channel pages' structure (ds.css: .phero, .psec and its
   blocks, .pfaq); this file adds only the head's details and the studio
   figures that stand beside each section.
   ============================================================================ */

/* the head is full-bleed navy; a translucent bar would lose the logo in it */
.mast.glass, .mast.glass.is-stuck{
  background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:1px solid var(--divider-soft); box-shadow:none;
}
.mast.glass.is-stuck{ box-shadow:0 1px 14px -8px rgba(10,16,32,.22) }

.phero__copy .eyebrow a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3) }
.phero__copy .eyebrow a:hover{ border-bottom-color:#fff }
.showcase{ margin:0 }
.showcase img{ display:block; width:100%; height:auto; border-radius:var(--r-lg);
  box-shadow:0 26px 60px -30px rgba(10,16,32,.34), 0 4px 12px -6px rgba(10,16,32,.10) }
/* a cut-out render carries no box of its own: the shadow falls under the devices */
.phero .showcase--cut img{ border-radius:0; box-shadow:none; filter:drop-shadow(0 34px 44px rgba(0,0,0,.4)) }

.outro{ text-align:center }
.outro .h1, .outro .lede{ margin-inline:auto }
.outro__cta{ display:flex; flex-wrap:wrap; gap:12px 16px; justify-content:center; margin-top:var(--s-xl) }

/* ---- the studio figure ---------------------------------------------------
   Real screens from our projects, set the way the channel pages' renders are:
   a browser window on a soft blue ground, sometimes a phone in front of it,
   sometimes a card with the number the screen is about. One box, whatever
   the screenshot's shape, so every row keeps the same footprint. */
.sfig{ position:relative; height:100%; width:auto; max-width:100%; aspect-ratio:5 / 4; margin:0 }
.sfig__ground{ position:absolute; inset:0; border-radius:28px;
  background:radial-gradient(90% 80% at 72% 12%, #fff 0%, transparent 60%), linear-gradient(160deg,#F4F7FD,#DCE6F8) }
.section--sunken .sfig__ground{ background:radial-gradient(90% 80% at 72% 12%, #fff 0%, transparent 60%), linear-gradient(160deg,#FFFFFF,#E3EAF8) }

.sfig__win{ position:absolute; left:7%; top:11%; width:80%; aspect-ratio:16 / 10.6;
  border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column;
  box-shadow:0 34px 64px -30px rgba(10,16,32,.42), 0 0 0 1px rgba(10,16,32,.06) }
.sfig__bar{ flex:none; height:26px; display:flex; align-items:center; gap:6px; padding:0 12px;
  background:#F3F5FA; border-bottom:1px solid #E5E9F2 }
.sfig__bar i{ width:8px; height:8px; border-radius:50%; background:#D5DBE7 }
.sfig__bar em{ margin-left:10px; min-width:0; max-width:58%; height:15px; padding:0 10px; border-radius:8px;
  background:#fff; font:500 9.5px/15px var(--font-text); font-style:normal; color:#8A94A8;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.psec__media .sfig img, .showcase .sfig img{ filter:none; max-width:none; max-height:none }
.sfig__win img{ display:block; width:100%; flex:1; min-height:0; object-fit:cover; object-position:var(--pos,top) }

/* a second window behind the first, for a flow that has a before and after */
.sfig__win--back{ left:auto; right:5%; top:5%; width:62%; opacity:.96; transform:none;
  box-shadow:0 24px 50px -30px rgba(10,16,32,.35), 0 0 0 1px rgba(10,16,32,.06) }
.sfig--duo .sfig__win:not(.sfig__win--back){ left:5%; top:30%; width:66% }

.sfig__phone{ position:absolute; right:6%; bottom:7%; width:23%; aspect-ratio:9 / 19.2;
  border-radius:22px; border:5px solid #0E1630; background:#0E1630; overflow:hidden;
  box-shadow:0 30px 50px -22px rgba(10,16,32,.5) }
.sfig__phone img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos,top) }
.sfig--phones .sfig__phone{ width:30%; bottom:auto; top:9% }
.sfig--phones .sfig__phone:nth-of-type(1){ left:12%; right:auto; top:12% }
.sfig--phones .sfig__phone:nth-of-type(2){ left:37%; right:auto; top:6%; z-index:1 }
.sfig--phones .sfig__phone:nth-of-type(3){ left:62%; right:auto; top:14% }

.sfig__chip{ position:absolute; left:3%; bottom:10%; z-index:2; display:grid; gap:3px;
  padding:12px 16px 13px; border-radius:14px; background:#fff;
  box-shadow:0 20px 40px -18px rgba(10,16,32,.35), 0 0 0 1px rgba(10,16,32,.05);
  animation:sfig-float 5s ease-in-out infinite alternate }
.sfig__chip small{ font:600 9.5px/1 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent) }
.sfig__chip b{ font:700 22px/1.05 var(--font-display); letter-spacing:-.02em; color:var(--ink) }
.sfig__chip span{ font:500 11px/1.2 var(--font-text); color:var(--ink-muted-48) }
.sfig__chip--tr{ left:auto; right:3%; top:6%; bottom:auto; animation-delay:-2.5s }
@keyframes sfig-float{ to{ transform:translateY(-8px) } }
@media (prefers-reduced-motion:reduce){ .sfig__chip{ animation:none } }

/* a cut-out render, whole, on the ground */
.sfig--render img{ position:absolute; inset:8% 6%; width:88%; height:84%; object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(10,16,32,.24)) !important }
/* artwork that is a picture in its own right fills the frame */
.sfig--art{ border-radius:28px; overflow:hidden; box-shadow:0 34px 70px -34px rgba(10,16,32,.5) }
.sfig--art > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,center) }

/* a small interface drawn in HTML, where there is no screen to show */
.smock{ position:absolute; left:10%; right:10%; top:12%; padding:20px 20px 18px; border-radius:18px; background:#fff;
  box-shadow:0 34px 64px -30px rgba(10,16,32,.42), 0 0 0 1px rgba(10,16,32,.06);
  font:500 13px/1.3 var(--font-text); color:var(--ink) }
.smock__hd{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:14px }
.smock__hd b{ font:600 16px/1.2 var(--font-display) }
.smock__hd span{ font:500 11px/1 var(--font-text); color:var(--ink-muted-48) }
.smock__list{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.smock__list li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:#F4F6FB }
.smock__list li i{ flex:none; width:18px; height:18px; border-radius:6px; border:1.6px solid #C5CDDD; display:grid; place-items:center }
.smock__list li.on i{ background:var(--c-accent); border-color:var(--c-accent) }
.smock__list li.on i::after{ content:''; width:8px; height:4px; border:2px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg) }
.smock__list li em{ margin-left:auto; font:600 10.5px/1 var(--font-text); font-style:normal; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 8px; border-radius:20px; background:#E6ECF8; color:var(--c-accent) }
.smock__list li em.ok{ background:#DDF5E8; color:#137A45 }
.smock__list li em.wait{ background:#FFF1D6; color:#8A5A00 }
.smock__bar{ margin-top:14px; height:7px; border-radius:7px; background:#E6ECF8; overflow:hidden }
.smock__bar i{ display:block; height:100%; width:var(--p,60%); border-radius:inherit; background:linear-gradient(90deg,var(--c-accent),#13AEDB) }
.smock__go{ margin-top:14px; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px; background:var(--c-accent); color:#fff; font:600 13px/1 var(--font-text) }

@media (max-width:900px){
  .psec__media{ height:auto }
  /* the drawn card sets its own height on a narrow screen: the ground grows
     round it, and the number card steps aside rather than cover a row */
  .sfig--mock{ aspect-ratio:auto; padding:9% 7% 8% }
  .sfig--mock .smock{ position:relative; inset:auto }
  .sfig--mock .sfig__chip{ display:none }
  .sfig{ width:100%; height:auto; max-width:560px; margin-inline:auto }
}
@media (max-width:560px){
  .sfig__bar{ height:20px } .sfig__bar em{ display:none }
  .sfig__chip{ padding:9px 12px 10px } .sfig__chip b{ font-size:17px } .sfig__chip span{ display:none }
  .sfig__phone{ border-width:3px; border-radius:14px }
  .smock{ left:6%; right:6%; top:8%; padding:14px; font-size:12px }
  .smock__list{ gap:6px } .smock__list li{ padding:8px 10px }
}

/* ---- the brand doctor in the head ------------------------------------------
   Each service has its own pose, standing at the corner of the showcase as
   though he is showing it: a little in front of it, feet below its edge. */
.phero .showcase{ position:relative }
.phero .showcase .phero__av{
  position:absolute; right:-4%; bottom:-10%; z-index:2;
  width:auto; height:clamp(230px,28vw,430px); max-width:none;
  border-radius:0; box-shadow:none; pointer-events:none;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.38));
  transform-origin:50% 100%;
  animation:phav-in 1.1s cubic-bezier(.2,.9,.25,1.15) .5s both, phav-bob 3.8s ease-in-out 1.6s infinite;
}
/* a portrait artwork (the games, the gamified journey) keeps him off its middle */
.phero .showcase:not(.showcase--cut) .phero__av{ right:-6%; bottom:-12% }
@keyframes phav-in{ from{ opacity:0; transform:translateY(18%) scale(.92) } to{ opacity:1; transform:none } }
@keyframes phav-bob{
  0%,100%{ transform:translateY(0) rotate(0) }
  30%{ transform:translateY(-2.2%) rotate(-1.2deg) }
  60%{ transform:translateY(0) rotate(0) }
  75%{ transform:translateY(-4%) scaleY(1.015) rotate(.8deg) }
}
@media (prefers-reduced-motion:reduce){ .phero .showcase .phero__av{ animation:none } }
@media (max-width:900px){
  .phero .showcase{ margin-bottom:clamp(40px,10vw,70px) }
  .phero .showcase .phero__av{ height:clamp(170px,44vw,260px); right:-2% }
}
/* A cut-out render is often wide and short; sized by it, he stood taller than
   the picture and his head reached the bar. These showcases get a box of
   their own height instead: the render sits in it, shifted left to leave him
   room, and he is measured from the box. */
.phero .showcase--cut{ height:clamp(300px,31vw,460px); display:flex; align-items:center; justify-content:flex-start }
.phero .showcase--cut > img:not(.phero__av){ width:auto; max-width:84%; max-height:100%; object-fit:contain }
.phero .showcase--cut .phero__av{ height:96%; right:-3%; bottom:-6% }
@media (max-width:900px){
  .phero .showcase--cut{ height:clamp(220px,62vw,340px) }
  .phero .showcase--cut .phero__av{ height:88%; right:-1%; bottom:-8% }
}