@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-4Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("fonts/Paperlogy-7Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Theme tokens (measured from the original) */
:root {
  --font: Paperlogy, sans-serif;
  --text: #f5f5f7;
  --muted: #a7a7b0;
  --accent: #ff4d8d;
  --bg: #070709;
  --bg-alt: #101014;
  --card: #0c0c10;
  --media: #111111;
  --badge: #0000009e;
  --line: rgba(255, 255, 255, 0.09);
  --radius-sm: 16px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --content: 1120px;
  --gutter: 20px;
  --section-pad: 92px;
  --col-gap: 48px;
  --h1: 76px;
  --h2: 52px;
  --h3: 22px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

.container {
  width: min(var(--content), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 0;
}
.header-inner {
  height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: block; width: 168px; height: 55px; }
.logo svg { display: block; }
.nav {
  display: flex;
  flex-direction: row;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 24px;
}
.nav a { transition: color 0.2s ease; }
.nav a:hover { color: var(--text); }

/* Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 900px;
  padding: 0;
  overflow: hidden;
  background: var(--media);
}
.hero-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 8% 9% at 72% 52%, rgba(196, 160, 72, 0.32), transparent 100%),
    radial-gradient(ellipse 12% 30% at 74% 68%, #121213 0%, transparent 100%),
    radial-gradient(ellipse 16% 24% at 70% 18%, #161617 0%, transparent 100%),
    radial-gradient(ellipse 30% 70% at 74% 62%, #0c0c0d 0%, #0e0e0f 55%, transparent 100%),
    radial-gradient(ellipse 75% 85% at 25% 25%, #232324 0%, #19191a 50%, #121213 100%);
}
.hero-content { position: relative; z-index: 1; margin-top: 48px; }
.hero-eyebrow {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.hero h1 {
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.hero-lead {
  max-width: 520px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

/* Sections */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--bg-alt); }

.eyebrow,
.eyebrow-muted {
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.eyebrow { color: var(--accent); font-size: 13px; }
.eyebrow-muted { color: var(--muted); font-size: 17px; }

h2 {
  font-size: var(--h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.body-lg {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.split-text h2 + .body-lg { margin-top: 28px; }
.gap-16 { margin-top: 16px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
  align-items: center;
}
.split-tight { margin-top: 28px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* Feature list */
.features { margin-top: 36px; }
.features li {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.features li:last-child { padding-bottom: 0; }
.feature-title {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
.features li p:not(.feature-title) {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Pictures (placeholders) */
.media {
  background-color: var(--media);
  overflow: hidden;
}
.media-lg { height: 460px; border-radius: var(--radius-md); }
.media-md { height: 340px; border-radius: var(--radius-sm); }

/* Soft placeholder "photos": blurred colour fields in each original picture's tones */
.ph-office {
  background:
    radial-gradient(ellipse 30% 30% at 70% 35%, rgba(70, 60, 110, 0.85), transparent 100%),
    radial-gradient(ellipse 22% 26% at 38% 30%, rgba(40, 40, 46, 0.9), transparent 100%),
    radial-gradient(ellipse 32% 50% at 18% 70%, rgba(28, 38, 66, 0.95), transparent 100%),
    linear-gradient(180deg, #c9c8bf 0%, #a9a59a 45%, #b0834f 62%, #8d6436 100%);
}
.ph-stage {
  background:
    radial-gradient(ellipse 30% 25% at 28% 48%, rgba(40, 120, 70, 0.75), transparent 100%),
    radial-gradient(ellipse 30% 25% at 72% 48%, rgba(40, 120, 70, 0.75), transparent 100%),
    linear-gradient(180deg, #4a4339 0%, #2a2a24 14%, #1b2a22 40%, #1a1814 72%, #0f0d0b 100%);
}
.ph-hall {
  background:
    radial-gradient(ellipse 40% 22% at 60% 30%, rgba(200, 80, 80, 0.55), transparent 100%),
    radial-gradient(ellipse 30% 18% at 40% 28%, rgba(230, 225, 215, 0.35), transparent 100%),
    linear-gradient(180deg, #5a4128 0%, #3b2d22 18%, #3a2a26 35%, #151416 55%, #0e0e10 100%);
}
.ph-desk {
  background:
    radial-gradient(ellipse 25% 20% at 28% 28%, rgba(50, 90, 210, 0.8), transparent 100%),
    radial-gradient(ellipse 22% 26% at 72% 62%, rgba(40, 60, 110, 0.85), transparent 100%),
    radial-gradient(ellipse 25% 30% at 20% 85%, rgba(240, 240, 240, 0.8), transparent 100%),
    linear-gradient(180deg, #e3e1dc 0%, #cfc9be 40%, #c39a62 60%, #b4874e 100%);
}
.ph-virtual {
  background:
    radial-gradient(ellipse 45% 22% at 50% 88%, rgba(20, 22, 40, 0.95), transparent 100%),
    radial-gradient(ellipse 18% 14% at 20% 30%, rgba(240, 160, 60, 0.75), transparent 100%),
    radial-gradient(ellipse 16% 14% at 72% 34%, rgba(120, 200, 160, 0.6), transparent 100%),
    linear-gradient(180deg, #1b2a8a 0%, #2340b5 40%, #1b2b80 65%, #121733 100%);
}

/* Webinar cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 42px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 24px 30px;
}
.card-num {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.card h3 {
  font-size: var(--h3);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.card p:not(.card-num) {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.duo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

/* Work gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px;
  gap: 18px;
  margin-top: 28px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--media);
  transition: transform 0.4s ease;
}
.tile.wide { grid-column: span 2; }
.badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--badge);
  color: var(--text);
  font-size: 13px;
  line-height: 22px;
}

.ph-web1 {
  background:
    radial-gradient(ellipse 20% 40% at 78% 60%, rgba(190, 195, 215, 0.45), transparent 100%),
    linear-gradient(180deg, #1d2654 0%, #2c3a7a 35%, #33438c 70%, #263172 100%);
}
.ph-web2 {
  background:
    radial-gradient(ellipse 22% 26% at 68% 32%, rgba(60, 140, 240, 0.55), transparent 100%),
    radial-gradient(ellipse 14% 22% at 70% 78%, rgba(25, 195, 165, 0.6), transparent 100%),
    linear-gradient(180deg, #ffffff 0%, #eef3fb 55%, #ffffff 62%, #f7f9fc 100%);
}
.ph-web3 {
  background:
    radial-gradient(ellipse 40% 25% at 50% 70%, rgba(60, 74, 107, 0.35), transparent 100%),
    linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 3%, #8a5a3a 4%, #a4724c 18%, #f4f4f4 22%, #ffffff 100%);
}
.ph-web4 {
  background:
    radial-gradient(ellipse 35% 22% at 50% 78%, rgba(40, 80, 190, 0.85), transparent 100%),
    linear-gradient(180deg, #0c1838 0%, #13286a 40%, #f2f3f7 44%, #ffffff 100%);
}
.ph-web5 {
  background:
    radial-gradient(ellipse 14% 20% at 30% 62%, rgba(243, 111, 111, 0.85), transparent 100%),
    radial-gradient(ellipse 14% 20% at 50% 62%, rgba(31, 182, 230, 0.85), transparent 100%),
    radial-gradient(ellipse 14% 20% at 70% 62%, rgba(23, 195, 163, 0.85), transparent 100%),
    linear-gradient(180deg, #ffffff 0%, #f4f6f8 18%, #26323d 26%, #26323d 100%);
}
.ph-hall2 {
  background:
    radial-gradient(ellipse 30% 25% at 50% 28%, rgba(150, 125, 70, 0.6), transparent 100%),
    linear-gradient(180deg, #3d3220 0%, #2b2316 50%, #120f0c 100%);
}
.ph-relay {
  background:
    radial-gradient(circle at 50% 50%, #1a5a4a 0%, #0e3a31 35%, #082621 70%, #061a17 100%);
}
.ph-room {
  background:
    radial-gradient(ellipse 22% 40% at 85% 45%, rgba(47, 191, 90, 0.75), transparent 100%),
    radial-gradient(ellipse 40% 25% at 40% 85%, rgba(50, 52, 62, 0.9), transparent 100%),
    linear-gradient(180deg, #2b3a8c 0%, #3a4796 20%, #cfcac0 40%, #6c6f7d 100%);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 72px 0 48px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.footer-brand {
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 10px;
}
.footer-text {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Tablet and phone */
@media (max-width: 1023px) {
  :root { --h1: 46px; --h2: 32px; }

  .nav { display: none; }

  .hero { align-items: flex-end; }
  .hero-content { margin-top: 0; margin-bottom: 48px; }
  .hero-media {
    background:
      linear-gradient(180deg, rgba(7, 7, 9, 0) 40%, rgba(7, 7, 9, 0.8) 78%, #070709 100%),
      radial-gradient(ellipse 18% 10% at 92% 52%, rgba(196, 160, 72, 0.28), transparent 100%),
      radial-gradient(ellipse 45% 45% at 82% 55%, #0c0c0d 0%, #0e0e0f 55%, transparent 100%),
      radial-gradient(ellipse 35% 25% at 85% 14%, #161617 0%, transparent 100%),
      radial-gradient(ellipse 95% 75% at 25% 15%, #232324 0%, #19191a 50%, #121213 100%);
  }

  .split { grid-template-columns: 1fr; }
  .media-lg,
  .media-md { height: 280px; }

  .cards { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  :root { --h1: 42px; }
}

@media (hover: hover) {
  .tile:hover { transform: translateY(-2px); }
}

/* Picture elements */
img { display: block; max-width: 100%; }
.logo img { width: 168px; height: 55px; }
img.hero-media { width: 100%; height: 100%; object-fit: cover; }
img.media { width: 100%; object-fit: cover; }
.tile-img { width: 100%; height: 100%; object-fit: cover; }
picture { display: block; }
.tile picture { height: 100%; }

/* Hero illustration: figure on the right; on small screens it sits top-right and the bottom fades to the page colour */
.hero img.hero-media { object-position: 60% center; }
@media (max-width: 1023px) {
  .hero img.hero-media { object-position: 90% center; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 7, 9, 0) 40%, rgba(7, 7, 9, 0.8) 78%, #070709 100%);
    pointer-events: none;
  }
}
/* Website mock-ups show the top of the page, like a browser screenshot */
.ph-web1, .ph-web2, .ph-web3, .ph-web4, .ph-web5 { object-position: center top; }

/* Pictures: original drawings blended over soft colour patches in each original photo's tones */
:root { --art-opacity: 0.35; }
.ph { position: relative; overflow: hidden; background-color: var(--media); background-size: 100% 100%; background-repeat: no-repeat; }
.ph > img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: var(--art-opacity); }
.ph-web1 > img, .ph-web2 > img, .ph-web3 > img, .ph-web4 > img, .ph-web5 > img { object-position: center top; }
.hero { background: var(--media) url("img/field/hero.png") no-repeat right center / 55.1% 100%; }
.hero img.hero-media { opacity: var(--art-opacity); }
.ph-office { background-image: url("img/field/office.png"); }
.ph-stage { background-image: url("img/field/stage.png"); }
.ph-hall { background-image: url("img/field/hall.png"); }
.ph-desk { background-image: url("img/field/desk.png"); }
.ph-virtual { background-image: url("img/field/virtual.png"); }
.ph-web1 { background-image: url("img/field/web1.png"); }
.ph-web2 { background-image: url("img/field/web2.png"); }
.ph-web3 { background-image: url("img/field/web3.png"); }
.ph-web4 { background-image: url("img/field/web4.png"); }
.ph-web5 { background-image: url("img/field/web5.png"); }
.ph-hall2 { background-image: url("img/field/hall2.png"); }
.ph-relay { background-image: url("img/field/relay.png"); }
.ph-virtual2 { background-image: url("img/field/virtual2.png"); }
.ph-room { background-image: url("img/field/room.png"); }
@media (max-width: 1023px) {
  .hero { background: var(--media) url("img/field/hero-t.png") no-repeat center / 100% 100%; }
  .ph-office { background-image: url("img/field/office-t.png"); }
  .ph-stage { background-image: url("img/field/stage-t.png"); }
  .ph-hall { background-image: url("img/field/hall-t.png"); }
  .ph-desk { background-image: url("img/field/desk-t.png"); }
  .ph-virtual { background-image: url("img/field/virtual-t.png"); }
  .ph-web1 { background-image: url("img/field/web1-t.png"); }
  .ph-web2 { background-image: url("img/field/web2-t.png"); }
  .ph-web3 { background-image: url("img/field/web3-t.png"); }
  .ph-web4 { background-image: url("img/field/web4-t.png"); }
  .ph-web5 { background-image: url("img/field/web5-t.png"); }
  .ph-hall2 { background-image: url("img/field/hall2-t.png"); }
  .ph-relay { background-image: url("img/field/relay-t.png"); }
  .ph-virtual2 { background-image: url("img/field/virtual2-t.png"); }
  .ph-room { background-image: url("img/field/room-t.png"); }
}
@media (max-width: 600px) {
  .hero { background: var(--media) url("img/field/hero-m.png") no-repeat center / 100% 100%; }
  .ph-office { background-image: url("img/field/office-m.png"); }
  .ph-stage { background-image: url("img/field/stage-m.png"); }
  .ph-hall { background-image: url("img/field/hall-m.png"); }
  .ph-desk { background-image: url("img/field/desk-m.png"); }
  .ph-virtual { background-image: url("img/field/virtual-m.png"); }
  .ph-web1 { background-image: url("img/field/web1-m.png"); }
  .ph-web2 { background-image: url("img/field/web2-m.png"); }
  .ph-web3 { background-image: url("img/field/web3-m.png"); }
  .ph-web4 { background-image: url("img/field/web4-m.png"); }
  .ph-web5 { background-image: url("img/field/web5-m.png"); }
  .ph-hall2 { background-image: url("img/field/hall2-m.png"); }
  .ph-relay { background-image: url("img/field/relay-m.png"); }
  .ph-virtual2 { background-image: url("img/field/virtual2-m.png"); }
  .ph-room { background-image: url("img/field/room-m.png"); }
}
@media (min-width: 601px) and (max-width: 1023px) {
  :root { --art-opacity: 0.28; }
}