/* ===========================================================
   Belle Slide — shared design system
   Fonts: General Sans (grotesk sans / UI+body) + Fraunces (light display serif)
   Palette: dark charcoal, monochrome, minimal
   =========================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&display=swap');

:root{
  --bg: #161616;
  --bg-raised: #1e1e1e;
  --line: rgba(255,255,255,.12);
  --ink: #f4f3f0;
  --ink-dim: rgba(244,243,240,.62);
  --ink-faint: rgba(244,243,240,.38);

  --font-sans: 'General Sans', 'Inter', Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  --max: 1180px;
  --pad: clamp(24px, 5vw, 72px);
  --section-gap: clamp(72px, 12vw, 160px);
}

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

html{ background: var(--bg); }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }

a{
  color: inherit;
  text-decoration: none;
}

.link{
  border-bottom: 1px solid var(--ink-faint);
  transition: border-color .2s ease, opacity .2s ease;
}
.link:hover{ border-color: var(--ink); }

::selection{ background: var(--ink); color: var(--bg); }

/* ---------- layout helpers ---------- */

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section{
  padding-top: var(--section-gap);
}

.section--tight{ padding-top: clamp(48px, 8vw, 96px); }

.eyebrow{
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 18px;
}

.statement{
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 20ch;
}

.statement em{
  font-style: italic;
  color: var(--ink-dim);
}

.lede{
  font-size: 17px;
  font-weight: 300;
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 22px 0 0;
}

.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
}

/* ---------- header ---------- */

.site-header{
  position: relative;
  z-index: 5;
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 28px;
  padding-bottom: 28px;
}

.lang-switch{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 16px;
  transition: color .2s ease, border-color .2s ease;
}
.lang-switch:hover{ color: var(--ink); border-color: var(--ink-faint); }

/* ---------- hero ---------- */

.hero{
  padding-top: clamp(40px, 8vw, 88px);
  padding-bottom: var(--section-gap);
  text-align: center;
}

.hero-logo{
  display: block;
  margin: 0 auto clamp(36px, 6vw, 64px);
  width: clamp(300px, 46vw, 600px);
  height: auto;
  filter: invert(1) brightness(1.05);
}

.hero .statement{
  max-width: 16ch;
  margin: 0 auto;
  font-size: clamp(24px, 3.2vw, 36px);
}

.hero .lede{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- clients ---------- */

.clients{
  border-top: 1px solid var(--line);
  padding-top: 56px;
}

.clients-label{
  text-align: center;
}

.clients-strip{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.clients-strip img{
  filter: invert(1) brightness(1.1);
  opacity: .55;
  max-width: 620px;
  transition: opacity .2s ease;
}
.clients-strip img:hover{ opacity: .85; }

/* ---------- how we work ---------- */

.work-header{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: 56px;
}

.work-list{
  margin-top: clamp(48px, 7vw, 88px);
}

.work-item{
  padding: 30px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
}

.work-list .grid-2 > div:first-child .work-item:last-child,
.work-list .grid-2 > div:last-child .work-item:last-child{
  border-bottom: 1px solid var(--line);
}

.work-item h3{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.work-item p{
  margin: 0;
  font-size: 15.5px;
  color: var(--ink-dim);
  max-width: 42ch;
}

/* ---------- video / demo ---------- */

.demo{
  border-top: 1px solid var(--line);
  padding-top: 56px;
  text-align: center;
}

.demo .statement{
  margin-left: auto;
  margin-right: auto;
}

.video-frame{
  margin-top: clamp(36px, 6vw, 64px);
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--bg-raised);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-facade{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}

.video-facade img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85);
  transition: filter .25s ease, transform .4s ease;
}

.video-facade:hover img{
  filter: saturate(1);
  transform: scale(1.015);
}

.play-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(22,22,22,.72);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease;
}

.play-btn::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--ink);
}

.video-facade:hover .play-btn{
  background: rgba(22,22,22,.9);
  border-color: rgba(255,255,255,.7);
}

/* ---------- for every need ---------- */

.need{
  border-top: 1px solid var(--line);
  padding-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.need-copy .statement{ max-width: 14ch; }

.need-links{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.need-links a{
  font-size: 15.5px;
  color: var(--ink-dim);
}
.need-links a:hover{ color: var(--ink); }

.need-media img{
  border-radius: 6px;
}

/* ---------- closing CTA ---------- */

.cta{
  border-top: 1px solid var(--line);
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  text-align: center;
}

.cta .statement{
  max-width: 15ch;
  margin: 0 auto;
}

.cta-email{
  display: inline-block;
  margin-top: 34px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 4px;
}
.cta-email:hover{ border-color: var(--ink); }

.cta-note{
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- footer ---------- */

.site-footer{
  border-top: 1px solid var(--line);
  padding-top: 32px;
  padding-bottom: 40px;
}

.site-footer .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-nav{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav a,
.footer-copy{
  font-size: 13px;
  color: var(--ink-faint);
}
.footer-nav a:hover{ color: var(--ink-dim); }

/* ---------- responsive ---------- */

@media (max-width: 820px){
  .grid-2,
  .work-header,
  .need{
    grid-template-columns: 1fr;
  }
  .need{
    text-align: left;
  }
  .need-copy .statement{ max-width: none; }
  .work-item{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 520px){
  .site-header .wrap{ padding-top: 20px; padding-bottom: 20px; }
  .logo img{ height: 20px; }
}

/* ---------- slide mockup (journey) ---------- */

.slide-mock{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

/* slide-mock theming — dark theme defaults */
.slide-mock{
  --slide-bg: #201f1d;
  --slide-ink: #f4f3f0;
  --slide-muted: #8d8b83;
  --slide-line: rgba(255,255,255,.14);
  --slide-dim: #3b3a37;
}
.slide-mock .sm-card{ fill: var(--slide-bg); stroke: var(--slide-line); }
.slide-mock .sm-fill{ fill: var(--slide-ink); }
.slide-mock .sm-stroke{ stroke: var(--slide-ink); fill: none; }
.slide-mock .sm-node{ fill: var(--slide-bg); stroke: var(--slide-ink); }
.slide-mock .sm-muted{ fill: var(--slide-muted); }
.slide-mock .sm-line{ stroke: var(--slide-line); }
.slide-mock .sm-dim{ fill: var(--slide-dim); }

/* ---------- blog / article ---------- */

.post{
  max-width: 760px;
  padding-top: clamp(48px, 8vw, 88px);
  padding-bottom: var(--section-gap);
}

.post-title{ max-width: none; }
.post-lede{ max-width: none; }

.post-body{
  margin-top: clamp(40px, 6vw, 64px);
}

.post-section{
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.post-section:last-child{
  border-bottom: 1px solid var(--line);
}

.post-section h2{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--ink);
}

.post-section p{
  margin: 0;
  font-size: 16px;
  color: var(--ink-dim);
}

.post-figure{
  margin: clamp(36px, 6vw, 64px) 0 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.post-figure img{
  width: 100%;
  display: block;
}