/* Command OS Studio V25.2 — desktop realizations only. Mobile V25.1 stays locked. */
@media (min-width:761px) {
  /* The project folio is a stable content row rather than an unstyled grid item. */
  #realisations .cos-mobile-card-head{
    position:relative;z-index:4;display:flex;align-items:center;justify-content:flex-start;
    gap:clamp(12px,1.5vw,23px);width:100%;min-width:0;margin:0;
    font-family:var(--sans);font-size:clamp(10px,.78vw,11px);font-weight:800;
    line-height:1.35;letter-spacing:.15em;text-align:left;color:#f2d1bc;
    -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  }
  #realisations .cos-mobile-card-head > span{white-space:nowrap}
  #realisations .cos-mobile-card-head > b{
    font-size:11px;letter-spacing:.095em;font-weight:700;white-space:nowrap;
    color:#e2e9df;font-variant-numeric:tabular-nums;
  }
  #realisations .cos-mobile-card-depth{display:none}
  /* One editorial closing line; the other two calls duplicate the main footer CTA. */
  #realisations .projects-closer > span,
  #realisations .projects-closer > a{display:none}
  #realisations .projects-closer{justify-content:flex-start;padding-top:20px}
  #realisations .projects-closer > div{display:flex;color:#c5d6cd;font-size:10px;letter-spacing:.12em}
  #realisations .cos-direction-mobile{display:none}
  #realisations .cos-direction-desktop{display:inline-flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
  #realisations .project-caption-arrow,
  #realisations .project-caption-arrow *{pointer-events:none}
  #realisations .project-caption-arrow{opacity:1;visibility:visible;transform:translateZ(0);backface-visibility:visible}
  /* Keep the arrow steady under the mouse: the entire card remains clickable. */
  #realisations .project-tile:hover .project-caption-arrow,
  #realisations .project-tile:focus-visible .project-caption-arrow{
    transform:translateZ(0);background:linear-gradient(145deg,#f4d1b6,#e6b48d);
    border-color:#f9dfc6;color:#132933;
  }
}
@media(min-width:821px){
  #realisations .project-tile,
  #realisations .project-tile:nth-child(2){
    grid-template-rows:auto auto;align-items:center;row-gap:clamp(12px,1.4vw,19px);
    min-height:0;padding:clamp(15px,1.4vw,20px);
  }
  #realisations .project-tile:first-child{min-height:0}
  #realisations .project-tile .cos-mobile-card-head{
    grid-column:1/-1;grid-row:1;align-self:center;
    padding:0 clamp(2px,.55vw,8px);min-height:21px;
  }
  #realisations .project-tile .project-media{
    grid-row:2;grid-column:1;align-self:center;justify-self:stretch;
    width:100%;height:auto;min-height:0;aspect-ratio:2048/1277;
  }
  #realisations .project-tile .project-caption{
    grid-row:2;grid-column:2;align-self:stretch;min-height:0;
    padding:clamp(21px,2.6vw,40px) clamp(20px,2.7vw,43px);
    justify-content:center;gap:clamp(18px,2.5vw,34px);
  }
  #realisations .project-tile:nth-child(2) .project-media{grid-column:2}
  #realisations .project-tile:nth-child(2) .project-caption{grid-column:1}
  #realisations .project-caption-arrow{align-self:flex-end;flex-shrink:0}
}
@media(min-width:761px) and (max-width:820px){
  #realisations .project-tile,
  #realisations .project-tile:nth-child(2){grid-template-rows:auto auto auto;row-gap:12px;min-height:0}
  #realisations .project-tile .cos-mobile-card-head{grid-column:1;grid-row:1;padding:3px 5px}
  #realisations .project-tile .project-media,
  #realisations .project-tile:nth-child(2) .project-media{grid-column:1;grid-row:2;order:initial}
  #realisations .project-tile .project-caption,
  #realisations .project-tile:nth-child(2) .project-caption{grid-column:1;grid-row:3;order:initial}
}
@media(max-width:760px){
  #realisations .cos-direction-desktop{display:none}
  #realisations .cos-direction-mobile{display:inline-flex}
}