/* ============================================================
   ICOSA LTD  ·  About.  Shares the base token system, with the
   inner-page type scale.
   ============================================================ */
:root{
  --black:#000000; --ink:#0B0B0B; --ink-2:#141414; --ink-3:#060606;
  --white:#FFFFFF; --orange:#FF631F; --orange-hi:#FF8347; --burnt:#C74906;
  --mut-dark:#9C9C9C; --mut-light:#5A5A5A;
  --line-dark:rgba(255,255,255,.15); --line-light:rgba(0,0,0,.15);

  --ff-display:"Rokkitt", Georgia, serif;
  --ff-sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:"IBM Plex Mono", ui-monospace, monospace;

  --h1:clamp(2.4rem, 5.2vw, 5rem);
  --h2:clamp(2.1rem, 4.2vw, 4rem);
  --sec:clamp(84px, 7.2vw, 132px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Type scale for this template ---------- */
.h-display{ letter-spacing:-.018em; max-width:20ch; }
.lede{ max-width:80ch; font-size:1.1rem; }
.h-display + p, .h-display + .lede{ margin-top:clamp(22px, 2.4vw, 34px); }
.eyebrow + .h-display{ margin-top:clamp(18px, 2vw, 26px); }

/* ============================================================
   Hero: one frame
   ============================================================ */
.hero{
  position:relative; background:var(--ink); overflow:hidden;
  min-height:calc(100svh - var(--nav-h, 95px));
  display:flex; align-items:center;
  padding-block:clamp(26px, 3.6vh, 60px);
}
.hero .shell{ position:relative; z-index:1; width:100%; }
.hero-mark{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:clamp(300px, 38vw, 620px); height:auto; fill:var(--orange);
  opacity:.045; pointer-events:none; z-index:0;
}
.hero h1{
  font-family:var(--ff-display); font-weight:500;
  font-size:var(--h1); line-height:1.03; letter-spacing:-.022em;
  max-width:26ch; margin-top:clamp(18px, 2vw, 28px);
}
.hero h1 em{ font-style:normal; color:var(--orange); }
.hero .lede{ margin-top:clamp(18px, 2vw, 28px); max-width:90ch; }
.stat-strip{
  display:flex; flex-wrap:wrap; gap:20px clamp(28px, 4vw, 72px);
  border-top:1px solid var(--line-dark);
  padding-top:22px; margin-top:clamp(28px, 3.2vw, 50px);
}
.stat b{
  display:block; font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1.5rem, 2.2vw, 2.1rem); line-height:1.1; color:var(--orange);
}
.stat span{
  display:block; margin-top:6px;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut-dark);
}

/* ============================================================
   Split sections
   ============================================================ */
.sec-head{ margin-bottom:clamp(44px, 4.4vw, 72px); }
.sec-head .h-display{ margin-top:clamp(18px, 2vw, 26px); }
.sec-head .lede{ margin-top:clamp(20px, 2.2vw, 30px); max-width:88ch; }

/* Headline caps set to break where the sentence breaks, verified at 1905 */
#whatwedo .h-display{ max-width:44ch; }
#story    .h-display{ max-width:30ch; }
#story    .h-display em{ display:block; }  /* break after the comma, as briefed */
#people   .h-display{ max-width:40ch; }
.closing  .h-display{ max-width:36ch; }

.body-grid{
  display:grid; grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  gap:clamp(38px, 4.4vw, 92px); align-items:start;
}
.body-grid.even{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.body-grid.ruled{ border-top:1px solid var(--line-dark); padding-top:clamp(34px, 3.6vw, 54px); }
.split-body p + p{ margin-top:20px; }
.split-body p{ max-width:88ch; }
.body-grid.even > p{ max-width:70ch; }
.who{ list-style:none; border-top:1px solid currentColor; }
.light .who{ border-color:var(--line-light); }
.who li{
  display:flex; align-items:baseline; gap:16px;
  padding-block:clamp(12px, 1.3vw, 17px);
  border-bottom:1px solid var(--line-light);
  font-size:1.05rem;
}
.who li::before{
  content:""; width:8px; height:8px; background:var(--burnt);
  transform:rotate(45deg); flex:none;
}
.who-head{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--burnt); margin-bottom:20px;
}

/* ---------- People columns ---------- */
.people-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(30px, 3.2vw, 64px);
  border-top:1px solid var(--line-light);
  padding-top:clamp(36px, 3.8vw, 58px);
}
.people-item h3{
  font-family:var(--ff-sans); font-weight:700; font-size:1.12rem;
  color:var(--black); line-height:1.3; margin-bottom:14px;
}
.people-item h3::before{
  content:""; display:block; width:28px; height:3px; background:var(--orange);
  margin-bottom:20px;
}
.people-item p{ color:var(--mut-light); font-size:1rem; max-width:48ch; }

/* ---------- Closing ---------- */
.closing{ position:relative; background:var(--ink); overflow:hidden; }
.closing .shell{ position:relative; z-index:1; }
.closing-mark{
  position:absolute; right:-6%; bottom:-30%;
  width:clamp(280px, 34vw, 560px); height:auto; fill:var(--orange);
  opacity:.05; pointer-events:none; z-index:0;
}
.closing .btn{ margin-top:clamp(28px, 3vw, 42px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px){
  .hero{ min-height:0; padding-block:clamp(56px, 8vw, 88px); }
  .body-grid, .body-grid.even{ grid-template-columns:minmax(0,1fr); gap:clamp(30px, 4vw, 44px); }
  .people-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero-mark{ opacity:.045; right:-24%; }
}
@media (max-width: 640px){
  .people-grid{ grid-template-columns:minmax(0,1fr); }
  .stat-strip{ gap:18px 34px; }
}