/* Homepage. The Figma frame is 1920 wide with the content column running
   130 → 1629 (1499px) and the hero art bleeding off the right edge. */
.home{--pagew:1499px;
  /* distance from the content column to the viewport edge — the hero art
     bleeds across it, the way it runs to the artboard edge in Figma */
  --gutter:calc((100vw - min(100vw - var(--topbar-gutter) * 2,var(--pagew))) / 2);
  overflow-x:clip;
}
/* The content column shares the header's gutter so the wordmark and the
   hero start on the same line. */
.page{width:min(100% - var(--topbar-gutter) * 2,var(--pagew));margin-inline:auto}
/* Topbar and wordmark: see base.css. No page-level overrides. */

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:minmax(0,745px) minmax(0,1fr);
  gap:60px;align-items:start;padding-top:100px;
}
.hero h1{
  margin:0;font-family:var(--serif);font-weight:700;font-size:90px;line-height:1;
  letter-spacing:-1px;color:#000;
}
.hero__lede{
  margin:44px 0 0;max-width:783px;font-size:24px;line-height:36px;color:#000;
}
.hero__art{margin-right:calc(-1 * var(--gutter));align-self:start}
.hero__art img{width:100%;height:auto}

.skills{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,188px);gap:11px 18px;
}
.skills li{
  display:flex;align-items:center;gap:9px;height:47px;padding:0 14px;
  white-space:nowrap;
  background:#fefefd;border:1px solid #d7d7d7;border-radius:11px;
  font-family:var(--display);font-weight:700;font-size:18px;line-height:25px;
}
.skills img{width:17px;height:17px;flex:none}

/* ── highlights ─────────────────────────────────────────────────────── */
.highlights{padding-top:130px}
.highlights h2,.toolkit h2{
  margin:0;font-family:var(--serif);font-weight:700;font-size:50px;line-height:1.1;color:#000;
}
.cards{
  margin-top:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
}
.card{
  position:relative;aspect-ratio:1;border-radius:50px;overflow:hidden;
  display:block;text-decoration:none;isolation:isolate;
}
.card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover img{transform:scale(1.04)}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,10,24,0) 42%,rgba(4,10,24,.55));
}
.card__num,.card__go{
  position:absolute;display:grid;place-items:center;border-radius:999px;
}
.card__num{
  left:33px;top:29px;width:40px;height:40px;background:rgba(255,255,255,.8);
  font-family:var(--sans);font-weight:700;font-size:16px;color:#000;
}
.card__go{
  right:24px;bottom:24px;width:39px;height:39px;
  border:1px solid #fff;color:#fff;font-size:17px;
}
.card__body{position:absolute;left:33px;bottom:24px;right:80px}
.card__body b{
  display:block;font-family:var(--serif);font-weight:700;font-size:42px;
  line-height:1.05;color:#fff;
}
.card__body em{
  display:inline-block;margin-top:10px;padding:8px 14px;border-radius:31px;
  background:rgba(255,255,255,.8);color:#000;font-style:normal;
  font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.4px;
  text-transform:uppercase;
}
.card.is-soon{cursor:default}
.card.is-soon .card__go{display:none}
.card__soon{
  position:absolute;right:24px;top:29px;padding:7px 13px;border-radius:999px;
  background:rgba(4,10,24,.62);color:#fff;font-weight:700;font-size:12px;
  letter-spacing:.3px;
}

/* ── toolkit ────────────────────────────────────────────────────────── */
.toolkit{
  padding-top:135px;display:grid;grid-template-columns:411px minmax(0,1fr);gap:56px;
  align-items:start;
}
.toolkit__text p{margin:24px 0 0;max-width:350px;font-size:24px;line-height:36px;color:#000}
.tools{
  list-style:none;margin:96px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(8,1fr);gap:10px;
}
.tools li{
  aspect-ratio:1;background:#fff;border:1.5px solid #e4e4e4;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:8px;text-align:center;
}
.tools img{width:34px;height:30px}
.tools span{font-weight:700;font-size:12px;line-height:15px;color:#000}

/* ── about ──────────────────────────────────────────────────────────── */
.about{
  padding-top:150px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:52px;
  align-items:start;
}
.about__photo{width:190px;height:190px;border-radius:28px;object-fit:cover}
.about h2{
  margin:0;font-family:var(--serif);font-weight:700;font-size:50px;line-height:1.08;
  letter-spacing:-2.8px;color:#1a2340;
}
.about__text p{margin:26px 0 0;max-width:880px;font-size:20px;line-height:32px;color:#202630}
.about__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{
  display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;
  border-radius:12px;font-weight:700;font-size:15px;text-decoration:none;
}
.btn--dark{background:#1a2340;color:#fff}
.btn--line{background:#fff;border:1px solid #d6d8dc;color:#1a2340}
.btn--off{background:#f2f3f5;border:1px solid #e8eaee;color:#969ba3;cursor:not-allowed}

.homefoot{
  margin-top:144px;border-top:1px solid #e6e6e4;padding:45px 0 56px;
  display:flex;justify-content:space-between;font-size:13px;color:#82868e;
}
.homefoot__kicker{font-weight:900;font-size:11px;letter-spacing:1.4px;text-transform:uppercase}

/* ── narrower screens ───────────────────────────────────────────────── */
@media (max-width:1400px){
  .hero{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero__art{margin-right:0}
  .home{overflow-x:visible}
  .hero h1{font-size:66px}
  .toolkit{grid-template-columns:1fr;gap:28px}
  .tools{margin-top:0;grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hero h1{font-size:48px}
  .hero__lede,.toolkit__text p{font-size:19px;line-height:29px}
  .skills{grid-template-columns:repeat(2,1fr)}
  .tools{grid-template-columns:repeat(3,1fr)}
  .cards{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:28px}
  .card__body b{font-size:34px}
}