@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
}

/* A graph-paper grid beneath the color field, with no scroll animation. */
.site-header {position: relative; z-index: 2; border-bottom-color: #18213d18;}
.hero {isolation: isolate; padding-top: 64px; padding-bottom: 54px;}
.hero-atmosphere {
  position: absolute;
  z-index: -1;
  top: -106px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background-color: #fffaf2;
  background-image:
    linear-gradient(#426b7b29 1px, transparent 1px),
    linear-gradient(90deg, #426b7b29 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
  mask-image: linear-gradient(#000 0%, #000 78%, transparent 100%);
}
.hero-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at -5% 49%, #ffc4b0c2 0%, #ffcfb95c 25%, transparent 55%),
    radial-gradient(ellipse at 106% 45%, #ade4dcc2 0%, #c6ebdf66 32%, transparent 59%),
    radial-gradient(ellipse at 48% 94%, #ffedb2b3 0%, #ffeacb40 36%, transparent 62%);
}
.hero-atmosphere > img {position: absolute; object-fit: contain; pointer-events: none; opacity: .23;}
.hero-atmosphere .hero-ruler {left: 8px; top: 140px; width: 28px; height: 620px; opacity: .32;}
.hero-atmosphere .hero-study {left: max(45px, calc((100vw - 1264px) / 2 + 15px)); bottom: 162px; width: 185px; height: auto;}
.hero-atmosphere .hero-spec {right: max(45px, calc((100vw - 1264px) / 2 + 15px)); top: 260px; width: 185px; height: auto;}
.hero h1 {
  font-family: 'Bricolage Grotesque', var(--sans);
  font-size: clamp(39px, 4.35vw, 63px);
  font-weight: 650;
  font-variation-settings: 'opsz' 72;
  letter-spacing: -.035em;
  line-height: 1.16;
}
.headline-result {color: #17696c;}
.hero .hero-description {margin-top: 23px; line-height: 1.6;}
.tagline-visual {display: inline-flex; align-items: baseline; justify-content: center; gap: 7px; white-space: nowrap;}
.tagline-lead {display: inline; font-size: 21px; font-weight: 500; line-height: inherit; letter-spacing: -.45px;}
.tagline-lead strong {font-family: var(--sans); font-style: normal; font-size: 1em; font-weight: 750; letter-spacing: -.45px; color: #12686a; margin-left: 3px;}
.tagline-process {display: inline; margin: 0; font-size: 18px; line-height: inherit; color: #3f4d58;}
.service-rotator {vertical-align: bottom;}
.hero .idea-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  row-gap: 3px;
  padding: 16px 20px;
  margin-top: 32px;
  background: #fffffff5;
  border: 1px solid #ffffff;
  border-radius: 17px;
  box-shadow: 0 0 0 1px #9b9c9b29, 0 18px 60px -24px #306c6b5c, 0 3px 12px #5b6b5910;
}
.hero .composer-prefix {grid-column: 1; grid-row: 1; margin-bottom: 0; font-size: 15px;}
.hero .idea-input {grid-column: 1; grid-row: 2; min-height: 54px;}
.hero .idea-composer textarea {height: 54px; min-height: 54px; font-size: 19px; line-height: 27px;}
.hero .animated-idea {font-size: 19px; line-height: 27px;}
.hero .composer-bottom {grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-self: center;}
.hero .idea-composer:focus-within {border-color: #52aaa6; box-shadow: 0 0 0 4px #52aaa620, 0 18px 60px -24px #306c6b5c;}
.hero .primary {background: #1a343d;}
.hero .primary:hover {background: #195e62;}
.hero .idea-shelf {margin-top: 29px;}
.hero .idea-tile {background: #ffffffed; border-color: #ffffff; border-radius: 11px;}
.hero .idea-tile:hover, .hero .idea-tile:focus-visible {border-color: #1a9697;}
.hero .idea-tile img {width: 80px; height: 80px;}
.hero .shelf-arrow {background: #ffffffa8; border-color: #738e822f;}
.brand-wand {width: 39px; height: 39px; margin: 0 9px 0 0; fill: currentColor; stroke: none; --wand-tip: #56b8a8;}
.site-footer .brand-wand {width: 32px; height: 32px; margin: 0 8px 0 0;}
.action-wand {width: 24px; height: 24px; flex-shrink: 0; --wand-tip: #a4ebd1;}
.hero .composer-bottom .button {gap: 11px;}
.launch-film {display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; padding: 7px 19px 7px 7px; border: 1px solid #36786c; border-radius: 13px; background: linear-gradient(115deg, #163e3d, #25594f); color: #fffdf2; box-shadow: 0 9px 25px -8px #25594f44, inset 0 1px #ffffff12; text-align: left; transition: background .2s, border-color .2s, box-shadow .2s;}
.launch-film:hover {background: linear-gradient(115deg, #1c4a47, #2b6c5d); border-color: #7dbd9b; box-shadow: 0 12px 30px -8px #25594f66;}
.launch-film:focus-visible {outline: 3px solid #227764; outline-offset: 5px;}
.film-thumbnail {position: relative; display: block; width: 100px; height: 56px; border-radius: 7px; overflow: hidden; flex-shrink: 0; background: #dfe7e1;}
.film-thumbnail img {width: 100%; height: 100%; object-fit: cover;}
.film-play {position: absolute; inset: 0; display: grid; place-items: center; background: #18213d24;}
.film-play svg {width: 30px; height: 30px; border-radius: 50%; padding: 7px; background: #e2f6ca; fill: #1a443b; box-shadow: 0 0 0 4px #ffffff28, 0 3px 12px #18213d30; transition: transform .2s;}
.launch-film:hover .film-play svg {transform: scale(1.07);}
.film-copy {display: flex; flex-direction: column; gap: 3px;}
.film-copy strong {font-size: 14px; font-weight: 650; letter-spacing: -.15px;}
.film-copy > span {font-size: 11px; color: #c3ddbe;}
.film-dialog {width: min(1040px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); border: 1px solid #ffffffa8; border-radius: 18px; background: #fffaf2; overflow: auto;}
.film-dialog::backdrop {background: #102c35a6; backdrop-filter: blur(8px);}
.film-dialog-heading {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 15px 12px 22px;}
.film-dialog-heading h2 {font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -.25px; line-height: 1.4;}
.film-close {display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #eae6db; color: #18213d;}
.film-close:hover {background: #d7e9e0;}
.film-close .icon {width: 17px; height: 17px;}
.film-dialog video {display: block; width: 100%; height: auto; max-height: calc(100dvh - 110px); aspect-ratio: 16 / 9; object-fit: contain; background: #111;}
.film-error {padding: 18px 22px; font-size: 13px;}
.film-error a {text-decoration: underline; text-underline-offset: 3px;}
@media (min-width: 901px) and (max-width: 1150px) {
  .tagline-visual {gap: 5px;}
  .tagline-lead {font-size: 18px;}
  .tagline-process {font-size: 16px;}
  .hero-atmosphere .hero-study {left: 29px; width: 126px;}
  .hero-atmosphere .hero-spec {right: 22px; top: 310px; width: 132px;}
}
@media (max-width: 900px) {
  .hero h1 {white-space: normal; font-size: 50px; max-width: 760px; margin-inline: auto;}
  .tagline-visual {white-space: normal; flex-wrap: wrap; column-gap: 6px; row-gap: 0;}
  .tagline-lead {font-size: 19px;}
  .tagline-process {font-size: 16px;}
  .hero-atmosphere .hero-study, .hero-atmosphere .hero-spec {display: none;}
}
@media (max-width: 650px) {
  .hero {padding-top: 40px; padding-bottom: 40px;}
  .hero h1 {font-size: 42px;}
  .hero-atmosphere {top: -80px;}
  .hero .hero-description {margin-top: 18px;}
  .tagline-lead {font-size: 18px;}
  .tagline-process {font-size: 14px;}
  .hero .idea-composer {margin-top: 25px;}
  .hero .idea-tile img {width: 65px; height: 72px;}
  .hero .idea-composer {display: block; padding: 16px;}
  .hero .composer-prefix {margin-bottom: 4px;}
  .hero .composer-bottom {margin-top: 9px;}
}