/* Figma 105:2686 — a dark first fold with a light introduction card. */
.figma-v2 .masthead,.figma-v2 .hero-band{background:#181818;color:#fff}
.figma-v2 .hero-band{--header-height:94px;--fold-bottom:48px;padding-bottom:var(--fold-bottom)}
.figma-v2 .page-sections{position:relative}
.figma-v2 .page-sections>section{width:100%;max-width:none;margin-inline:0}
.figma-v2 .masthead .header{padding-inline:clamp(24px,5.625vw,81px) 36px}
.figma-v2 .masthead .wordmark{color:#f4f3ef}
.figma-v2 .masthead .wordmark>.blue{color:var(--blue)}
.figma-v2 .masthead .header-contact{color:#fff;background:transparent;border-color:#ffffff59}
.figma-v2 .masthead .header-contact .blue{color:inherit}

.figma-v2 .hero-logos.hero-dark{display:grid;align-items:center;width:95%;height:auto;min-height:calc(90vh - var(--header-height) - var(--fold-bottom));min-height:calc(90svh - var(--header-height) - var(--fold-bottom));margin:0 auto;padding:55px clamp(32px,4.8611vw,70px);border:2px solid #e3e2e236;border-radius:32px;background:#181818;text-align:left;overflow:hidden;isolation:isolate}
/* Each edge has a short wavy stretch; the rest of the outline stays smooth. */
.figma-v2 .hero-logos.hero-dark.has-wave-outline{border-color:transparent}
.hero-dark .hero-border-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero-dark .hero-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,32.6389vw,540px);gap:clamp(40px,8.5417vw,160px);align-items:center}
.hero-dark .hero-card-halo{position:relative;isolation:isolate;align-self:center;min-width:0;width:100%}
.hero-dark .hero-card-halo::before{
  content:"";position:absolute;inset:-44px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 15% 18%,#ff263854 0%,#ff263800 58%),radial-gradient(ellipse at 85% 82%,#2448ff61 0%,#2448ff00 58%);
  filter:blur(32px);opacity:.75;
}
@media(prefers-reduced-motion:no-preference){
  .hero-dark .hero-card-halo::before{animation:hero-halo-drift 16s ease-in-out infinite alternate}
}
@keyframes hero-halo-drift{
  from{transform:translate(-6px,-8px) scale(.98);opacity:.6}
  to{transform:translate(6px,8px) scale(1.035);opacity:.85}
}
@media(max-width:700px){
  .hero-dark .hero-card-halo::before{inset:-20px;filter:blur(22px);background:radial-gradient(ellipse at 15% 18%,#ff263833 0%,#ff263800 58%),radial-gradient(ellipse at 85% 82%,#2448ff3d 0%,#2448ff00 58%)}
}
.hero-dark .hero-lead{position:relative;min-width:0}
.hero-dark .hero-partner-arrow{
  display:block;position:absolute;left:.2em;top:calc(50% + .12em);translate:0 -50%;
  width:.68em;height:.65em;pointer-events:none;
}
@media(prefers-reduced-motion:no-preference){
  .hero-dark .hero-partner-arrow{
    animation:hero-word-in .85s cubic-bezier(.22,.45,.25,1) 70ms backwards;
  }
}
.hero-dark .hero-design-seal{position:absolute;top:46px;right:0;width:clamp(76px,8vw,124px);height:auto;pointer-events:none}
@media(max-width:700px){
  .hero-dark .hero-design-seal{top:42px;width:clamp(64px,15vw,96px)}
}
.figma-v2 .hero-logos.hero-dark .badge{display:flex;width:max-content;max-width:100%;padding:0;margin:0 0 24px;border:0;border-radius:0;background:none;box-shadow:none;font:600 11px/20px Poppins,Arial,sans-serif;letter-spacing:1px;gap:9px;color:#818181;white-space:normal}
.figma-v2 .hero-logos.hero-dark .badge img{width:6px;height:6px;flex:none}
.figma-v2 .hero-logos.hero-dark h1{width:100%;max-width:none;margin:0;padding:.1557em 0;font:600 clamp(58px,5.65vw,100px)/.97978 Geist,Arial,sans-serif;letter-spacing:-.0649817em;color:#fff}
.figma-v2 .hero-logos.hero-dark .hero-line{display:block;white-space:nowrap}
.figma-v2 .hero-logos.hero-dark .hero-line:nth-child(2){position:relative;padding-left:1.1924em;margin-bottom:.1em}
.figma-v2 .hero-logos.hero-dark h1 .muted{color:#18181847}
.figma-v2 .hero-logos.hero-dark .hero-aside{display:block;grid-area:auto;width:100%;min-width:0;max-width:none;min-height:650px;margin:0;padding:32px 32px 46px;border:0;border-radius:25px;background:#fff;box-shadow:58px 44px 20px #ffffff00,37px 28px 19px #ffffff08,21px 16px 16px #ffffff1a,9px 7px 12px #ffffff2b,2px 2px 6px #fff3;align-self:center;overflow:hidden}
.figma-v2 .hero-logos.hero-dark .hero-graphic{position:relative;display:block;width:100%;height:auto;aspect-ratio:406/262;margin:0 0 36.16px;pointer-events:none;transform:none}
.figma-v2 .hero-logos.hero-dark .hero-graphic>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:14px;box-shadow:none}
.figma-v2 .hero-logos.hero-dark .hero-graphic>.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:14px;opacity:0}
.figma-v2 .hero-logos.hero-dark .hero-graphic>.hero-video.is-playing{opacity:1}
.hero-dark .hero-card-copy{margin-inline:6.41px;min-width:0;container-type:inline-size}
.hero-dark .hero-description{min-width:0;white-space:normal;overflow-wrap:break-word}
.figma-v2 .hero-logos.hero-dark .hero-studio-note{font:600 24px/29.3px Poppins,Arial,sans-serif;letter-spacing:-1px;margin:0 0 16px;color:#7e7e7e}
.figma-v2 .hero-logos.hero-dark .hero-studio-note>span{color:#212121}
.figma-v2 .hero-logos.hero-dark .hero-description{width:100%;max-width:380px;margin:0;font:500 16px/25.5px Poppins,Arial,sans-serif;color:#7c7c7c}
.figma-v2 .hero-logos.hero-dark .hero-actions{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:wrap;margin:32px 0 0;gap:0}
.figma-v2 .hero-logos.hero-dark .hero-actions .pill{width:180px;height:48px;min-height:48px;padding:12px 20px;border:0;font:700 15px/18.75px Geist,Arial,sans-serif;box-shadow:2px 3px 7px #0003,8px 11px 13px #0000002b,18px 24px 18px #0000001a,32px 42px 21px #00000008}

.figma-v2 .hero-logos.hero-dark .experience{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;height:auto;margin:56px 0 0;padding:13px 0 0;border:0}
.hero-dark .experience::before{content:"";position:absolute;top:0;left:0;width:72px;height:1px;background:#2e2e2e}
.figma-v2 .hero-logos.hero-dark .company-row{position:static;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:16px 32px;width:100%;height:auto;margin:0}
.figma-v2 .hero-logos.hero-dark .company-row .logo-slot{position:static;display:block;flex:none;width:auto;height:auto;grid-column:auto;margin:0;border:0;overflow:visible}
.figma-v2 .hero-logos.hero-dark .company-row .logo-slot img{width:auto;height:auto;max-width:none;scale:none;transform:none}
.hero-indmark{display:block;width:30.1754px;height:32.676px}
.hero-indmark>img{display:block}
.hero-etmark{position:relative;display:block;width:101px;height:23px;overflow:hidden}
.hero-etmark>span{position:absolute;left:.4949px;top:.3335px;width:99.9798px;height:22.7213px;mask:url(assets/figma-v2/95098.svg) -.238px -.227px / 100.428px 23.1757px no-repeat}
.figma-v2 .hero-logos.hero-dark .experience>.eyebrow{display:block;max-width:none;margin:0;font:500 12.416px/18.624px Poppins,Arial,sans-serif;letter-spacing:1.3658px;color:#8c8c8c;text-align:left}

@media(min-width:1151px) and (prefers-reduced-motion:no-preference){
  .hero-dark .hero-aside{animation:hero-content-in .9s cubic-bezier(.22,.45,.25,1) .4s backwards}
  /* Animate the card once; nested translations made its content jump in stages. */
  .hero-dark .hero-aside .hero-graphic,
  .hero-dark .hero-aside .hero-studio-note,
  .hero-dark .hero-aside .hero-description,
  .hero-dark .hero-aside .hero-actions{animation:none}
  .hero-dark .hero-aside:focus-within{animation:none}
}
@media(max-width:1150px){
  .figma-v2 .hero-band{--header-height:116px}
}
@media(min-width:901px) and (max-width:1150px){
  .hero-dark .hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:32px}
  .figma-v2 .hero-logos.hero-dark{padding:40px 32px}
  .figma-v2 .hero-logos.hero-dark h1{font-size:5.25vw}
  .figma-v2 .hero-logos.hero-dark .hero-aside{min-height:0;padding:24px 24px 36px}
  .figma-v2 .hero-logos.hero-dark .hero-studio-note{font-size:24px;line-height:1.22}
  .figma-v2 .hero-logos.hero-dark .hero-description{font-size:14px;line-height:1.7}
  .figma-v2 .hero-logos.hero-dark .company-row{column-gap:20px}
}
@media(max-width:900px){
  .figma-v2 .masthead .header{padding-inline:8px}
  .figma-v2 .hero-logos.hero-dark{padding:40px 32px}
  .hero-dark .hero-layout{grid-template-columns:minmax(0,1fr);gap:40px}
  .figma-v2 .hero-logos.hero-dark h1{font-size:clamp(42px,9vw,76px)}
  .figma-v2 .hero-logos.hero-dark .hero-aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;min-height:0;padding:28px}
  .figma-v2 .hero-logos.hero-dark .hero-graphic{grid-column:1;grid-row:1;align-self:center;margin:0}
  .hero-dark .hero-card-copy{margin:0}
  .figma-v2 .hero-logos.hero-dark .hero-studio-note{font-size:24px;line-height:1.25}
  .figma-v2 .hero-logos.hero-dark .hero-description{font-size:14px;line-height:1.7}
  .figma-v2 .hero-logos.hero-dark .hero-actions{margin-top:24px}
}
@media(max-width:700px){
  .figma-v2 .masthead .header{padding-inline:0}
  .figma-v2 .masthead .header.nav-ready .menu-toggle{background:transparent;color:white;border-color:#ffffff59}
  .figma-v2 .masthead .header.nav-ready nav{background:#222;color:white;border-color:#ffffff26}
  .figma-v2 .masthead .header.nav-ready nav a{border-bottom-color:#ffffff1a}
  .figma-v2 .hero-band{--header-height:80px;--fold-bottom:24px}
  .figma-v2 .hero-logos.hero-dark{width:calc(100% - 32px);padding:28px 20px;border-radius:var(--surface-radius)}
  .hero-dark .hero-layout{gap:32px}
  .figma-v2 .hero-logos.hero-dark .badge{font-size:8px;letter-spacing:.4px;margin-bottom:20px;gap:7px}
  .figma-v2 .hero-logos.hero-dark h1{font-size:clamp(31px,8.45vw,58px);line-height:1.04;letter-spacing:-.065em}
  .figma-v2 .hero-logos.hero-dark .experience{margin-top:40px}
  .figma-v2 .hero-logos.hero-dark .company-row{gap:12px 20px}
  .figma-v2 .hero-logos.hero-dark .experience>.eyebrow{font-size:9px;line-height:1.5;letter-spacing:1px;margin-top:6px}
  .figma-v2 .hero-logos.hero-dark .hero-aside{display:block;padding:20px 20px 32px;border-radius:var(--surface-radius)}
  .figma-v2 .hero-logos.hero-dark .hero-graphic{margin:0 0 28px}
  .figma-v2 .hero-logos.hero-dark .hero-studio-note{font-size:clamp(20px,5.6vw,28px);line-height:1.22}
  .figma-v2 .hero-logos.hero-dark .hero-description{font-size:14px;line-height:1.75}
}

/* Let the dark experience statement flow into the muted availability copy. */
.figma-v2 .hero-logos.hero-dark .hero-studio-note{color:#181818;white-space:normal}
.figma-v2 .hero-logos.hero-dark .hero-studio-note>span{color:#818181}
.figma-v2 .hero-logos.hero-dark .hero-studio-note::before{
  content:"";display:inline-block;width:.78em;height:.78em;
  margin-right:.3em;vertical-align:-.03em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2022%2022%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23ff263b%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%225%22%20r%3D%224%22%20fill%3D%22%23ff263b%22%20fill-opacity%3D%22.38%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224%22%20fill%3D%22%23ff263b%22%20fill-opacity%3D%22.38%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
@supports (font-size:1cqi){
  .figma-v2 .hero-logos.hero-dark .hero-studio-note{
    font-size:min(24px,6cqi);
    line-height:1.22;
    letter-spacing:-.035em;
    white-space:normal;
  }
}

/* Inset showreel and aligned copy match the updated introduction card. */
.figma-v2 .hero-logos.hero-dark .hero-aside{display:block;padding:30px;min-height:0}
.figma-v2 .hero-logos.hero-dark .hero-graphic{margin:0 0 24px;align-self:auto;overflow:hidden;border-radius:24px;aspect-ratio:374/234}
.figma-v2 .hero-logos.hero-dark .hero-graphic>img,
.figma-v2 .hero-logos.hero-dark .hero-graphic>.hero-video{border-radius:0;transform:scale(1.008);transform-origin:center}
.hero-dark .hero-card-copy{margin:0;padding:0}
.figma-v2 .hero-logos.hero-dark .hero-actions .pill{width:100%}
@media(min-width:1151px){
  .figma-v2 .hero-logos.hero-dark .hero-aside{box-shadow:0 16px 40px #0003}
  .figma-v2 .hero-logos.hero-dark .hero-studio-note{margin-bottom:18px;line-height:1.2}
  .figma-v2 .hero-logos.hero-dark .hero-description{max-width:none;font-size:15px;line-height:1.56}
  .figma-v2 .hero-logos.hero-dark .hero-actions{margin-top:24px}
  .figma-v2 .hero-logos.hero-dark .hero-actions .pill{height:46px;min-height:46px;font-size:14px;padding:12px 18px}
}

/* Smooth continuous corners on the hero introduction card. */
.figma-v2 .hero-logos.hero-dark .hero-aside{border-radius:30px}
@supports (corner-shape:squircle){
  .figma-v2 .hero-logos.hero-dark .hero-aside{
    corner-shape:squircle;
    border-radius:48px;
  }
}
@media(max-width:700px){
  .figma-v2 .hero-logos.hero-dark .hero-aside{border-radius:32px}
  @supports (corner-shape:squircle){
    .figma-v2 .hero-logos.hero-dark .hero-aside{border-radius:48px}
  }
}