/* ============================================================
   ICOSA LTD  ·  About
   ============================================================ */

/* ---------- What we do ---------- */
#whatwedo{ overflow:hidden; }
.body-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:48px clamp(48px, 8vw, 160px); align-items:start;
}
.split-body p{ max-width:60ch; color:var(--text-soft); }
.split-body p + p{ margin-top:24px; }
.split-body p.first{
  font-size:var(--lede); font-weight:300; line-height:1.65; color:var(--ink);
}
.who-head{
  font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--burnt-ink);
  padding-bottom:18px; border-bottom:1px solid var(--line-strong);
}
.who{ list-style:none; }
.who li{
  display:flex; align-items:baseline; gap:22px;
  padding-block:20px; border-bottom:1px solid var(--line);
  font-size:clamp(1.2rem, 1rem + .7vw, 1.6rem); font-weight:300; letter-spacing:-.01em;
  transition:padding .5s var(--ease), color .4s var(--ease);
}
.who li:hover{ padding-left:10px; color:var(--burnt); }
.who-num{ font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--burnt-ink); flex:none; }

/* ---------- How we got here ---------- */
.story{ overflow:hidden; }
.story > .lines{ --lc:var(--orange); --lo:.2; --lfade:radial-gradient(ellipse 55% 80% at 0% 100%, #000 0%, transparent 70%); }
.story-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:48px clamp(48px, 8vw, 160px); align-items:start;
}
.story-head{ position:sticky; top:calc(var(--nav-h, 88px) + 40px); }
.story-head .h-display{ margin-top:26px; }
.story-lede{
  font-size:clamp(1.35rem, 1.1rem + .9vw, 1.9rem); font-weight:300; line-height:1.5; letter-spacing:-.01em;
  color:var(--white); padding-left:28px; border-left:2px solid var(--orange);
}
.story-body p:not(.story-lede){ margin-top:26px; max-width:58ch; color:var(--on-dark-mut); }
.story-body .story-lede + p{ margin-top:40px; }

/* ---------- The people ---------- */
.people-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 1.6vw, 28px); }
.people-item{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--white); padding:clamp(30px, 3vw, 48px) clamp(26px, 2.6vw, 44px) clamp(36px, 3.4vw, 56px);
  transition:box-shadow .7s var(--ease);
}
/* A burnt facet in the corner, which grows to fill the card on hover. */
.people-item::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--burnt);
  clip-path:polygon(calc(100% - 64px) 0, 100% 0, 100% 56px);
  transition:clip-path .8s var(--ease);
}
.people-item:hover{ box-shadow:0 28px 60px -34px rgba(35,31,32,.45); }
.people-item:hover::before{ clip-path:polygon(-120% 0, 100% 0, 100% 220%); }
.people-num{ font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--burnt-ink); transition:color .5s var(--ease); }
.people-item h3{ margin-top:clamp(40px, 5vw, 72px); font-size:var(--h3); font-weight:300; transition:color .5s var(--ease); }
.people-item p{ margin-top:16px; font-size:.98rem; color:var(--text-soft); transition:color .5s var(--ease); }
.people-item:hover .people-num,
.people-item:hover h3{ color:var(--white); }
.people-item:hover p{ color:rgba(255,255,255,.94); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .body-grid, .story-grid{ grid-template-columns:minmax(0,1fr); }
  .story-head{ position:static; }
  .people-grid{ grid-template-columns:minmax(0,1fr); }
}