@charset "UTF-8";
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto; }

/* ================================================================
   1750px ΓÇö LARGE DESKTOP
   Slight reduction from the 192px / 200px spacing
   ================================================================ */
@media (max-width: 1750px) {
  h1 {
    font-size: 104px; }

  h2 {
    font-size: 50px; }

  h3 {
    font-size: 25px; }

  h4 {
    font-size: 27px; }

  .container {
    padding-left: 240px;
    padding-right: 240px; }

  .nav-header__inner {
    padding-left: 140px;
    padding-right: 140px; }
  .nav-header__nav {
    gap: 50px; }

  .thesis .container {
    padding-left: 150px;
    padding-right: 150px; }

  .cta .container {
    padding-left: 150px;
    padding-right: 150px; }

  .svc-cta {
    padding-left: 200px;
    padding-right: 200px; } }
/* ================================================================
   1600px ΓÇö DESKTOP
   ================================================================ */
@media (max-width: 1600px) {
  h1 {
    font-size: 96px; }

  h2 {
    font-size: 48px; }

  h3 {
    font-size: 24px; }

  h4 {
    font-size: 26px; }

  .container {
    padding-left: 190px;
    padding-right: 190px; }

  /* ------------------------------
     Header
     ------------------------------ */
  .nav-header__inner {
    height: 84px;
    padding-left: 100px;
    padding-right: 100px; }
  .nav-header__logo {
    font-size: 33px; }
    .nav-header__logo span {
      width: 7px;
      height: 7px;
      transform: translateY(-12px); }
  .nav-header__nav {
    gap: 42px; }
  .nav-header__link {
    font-size: 17px;
    padding-bottom: 5px; }

  /* ------------------------------
     Hero
     ------------------------------ */
  .hero {
    min-height: 88vh;
    padding: 110px 0; }
    .hero__container {
      max-width: 1360px;
      padding-left: 36px;
      padding-right: 36px; }
    .hero__lede {
      font-size: 19px;
      margin-bottom: 25px; }

  /* ------------------------------
     Thesis
     ------------------------------ */
  .thesis {
    padding: 85px 0; }
    .thesis .container {
      padding-left: 120px;
      padding-right: 120px; }
    .thesis__eyebrow {
      margin-bottom: 20px; }
    .thesis__quote {
      max-width: 820px;
      font-size: 48px; }
    .thesis__desc {
      margin-top: 20px; }

  /* ------------------------------
     Services
     ------------------------------ */
  .services {
    padding: 85px 0; }

  .service-card {
    padding: 28px;
    gap: 20px; }
    .service-card__top {
      gap: 14px; }
    .service-card__icon {
      width: 45px;
      height: 45px; }
      .service-card__icon svg {
        width: 21px;
        height: 21px; }
    .service-card__title {
      font-size: 24px; }

  /* ------------------------------
     Bento
     ------------------------------ */
  .bento {
    padding: 110px 0; }

  .bento__desc {
    font-size: 18px; }

  .bento-feature {
    height: 500px; }
    .bento-feature__body {
      padding: 40px; }
    .bento-feature__desc {
      font-size: 15px; }

  .bento-card {
    min-height: 280px; }
    .bento-card__title {
      font-size: 24px; }

  /* ------------------------------
     Velocity
     ------------------------------ */
  .velocity {
    padding: 85px 0; }

  .velocity-step {
    padding: 22px;
    gap: 20px; }
    .velocity-step__title {
      font-size: 24px; }
    .velocity-step__desc {
      font-size: 13px; }

  /* ------------------------------
     Case Studies
     ------------------------------ */
  .case-studies {
    padding: 85px 0; }

  .case-studies__head {
    margin-bottom: 40px; }

  .case-grid {
    gap: 24px; }

  .case-card__media {
    height: 330px; }
  .case-card__body {
    padding: 22px;
    gap: 14px; }
  .case-card__title {
    font-size: 32px; }

  /* ------------------------------
     Main CTA
     ------------------------------ */
  .cta {
    padding: 110px 0; }
    .cta .container {
      padding-left: 120px;
      padding-right: 120px; }
    .cta__title {
      max-width: 850px;
      font-size: 76px; }
    .cta__desc {
      font-size: 18px;
      margin-top: 20px; }
    .cta__actions {
      margin-top: 28px; }

  /* ================================================================
     SERVICE PAGE
     ================================================================ */
  .svc-hero {
    padding: 95px 0 105px; }

  .svc-hero__title {
    max-width: 900px;
    font-size: 76px;
    letter-spacing: -1.9px; }

  .svc-hero__media {
    height: 500px; }

  .svc-section {
    padding: 85px 0; }

  .svc-section-head {
    margin-bottom: 55px; }

  .svc-section-head__title {
    font-size: 54px; }

  .svc-card--featured .svc-card__media {
    height: 350px; }
  .svc-card__media {
    height: 270px; }
  .svc-card__body {
    padding: 28px; }
  .svc-card__title {
    font-size: 25px; }

  .svc-banner {
    padding-top: 70px;
    padding-bottom: 70px; }

  .svc-banner__grid {
    gap: 40px; }

  .svc-banner__title {
    font-size: 46px; }

  .svc-banner__photo {
    height: 350px; }

  .svc-cta {
    padding: 70px 120px; }

  .svc-cta__text {
    padding: 55px 50px; }

  .svc-cta__title {
    font-size: 52px; }

  .svc-cta__visual {
    height: 440px; }

  .svc-cta__ring {
    width: 250px;
    height: 250px; }
    .svc-cta__ring::after {
      width: 150px;
      height: 150px; }

  .svc-cta__badge .word {
    font-size: 46px; }

  /* ================================================================
     ABOUT
     ================================================================ */
  .story {
    padding: 100px 0; }

  .story__grid {
    gap: 40px; }

  .story__title {
    font-size: 46px; }

  .story__quote {
    font-size: 18px; }

  .story__media {
    height: 440px; }

  .pillars {
    padding: 55px 0; }

  .pillars__title,
  .leadership__title {
    font-size: 46px; }

  .pillar-card {
    padding: 22px; }
    .pillar-card__number {
      font-size: 46px; }
    .pillar-card__title {
      font-size: 24px; }
    .pillar-card__desc {
      font-size: 15px; }

  .leadership {
    padding: 55px 0; }

  .leader-card__photo {
    height: 220px; }
  .leader-card__name {
    font-size: 24px; }

  /* ================================================================
     CONTACT
     ================================================================ */
  .contact-section {
    padding: 100px 0; }

  .contact-grid {
    gap: 32px; }

  .contact-form {
    padding: 40px; }

  .contact-form__title {
    font-size: 32px; }

  .contact-details {
    padding: 28px; }

  /* ================================================================
     FOOTER
     ================================================================ */
  .site-footer {
    padding: 55px 0; }

  .footer-grid {
    gap: 36px; }

  .footer-brand__logo {
    font-size: 46px; } }
/* ================================================================
   1399px ΓÇö LAPTOP / SMALL DESKTOP
   ================================================================ */
@media (max-width: 1399px) {
  h1 {
    font-size: 84px; }

  h2 {
    font-size: 44px; }

  h3 {
    font-size: 23px; }

  h4 {
    font-size: 25px; }

  .container {
    padding-left: 140px;
    padding-right: 140px; }

  /* ------------------------------
     Header
     ------------------------------ */
  .nav-header__inner {
    padding-left: 60px;
    padding-right: 60px; }
  .nav-header__nav {
    gap: 32px; }
  .nav-header__link {
    font-size: 16px; }

  /* ------------------------------
     General containers
     ------------------------------ */
  .hero__container {
    max-width: 1200px;
    padding-left: 32px;
    padding-right: 32px; }

  /* ------------------------------
     Hero
     ------------------------------ */
  .hero {
    min-height: 82vh;
    padding: 95px 0; }

  .hero__lede {
    font-size: 18px;
    max-width: 620px; }

  /* ------------------------------
     Thesis
     ------------------------------ */
  .thesis {
    padding: 75px 0; }
    .thesis .container {
      padding-left: 80px;
      padding-right: 80px; }
    .thesis__quote {
      max-width: 760px;
      font-size: 44px; }

  /* ------------------------------
     Services
     ------------------------------ */
  .services {
    padding: 75px 0; }

  .service-cards {
    gap: 20px; }

  .service-card {
    padding: 24px; }
    .service-card__title {
      font-size: 22px; }
    .service-card__desc {
      font-size: 13px; }

  /* ------------------------------
     Bento
     ------------------------------ */
  .bento {
    padding: 90px 0; }

  .bento__head {
    gap: 24px; }

  .bento__desc {
    max-width: 400px;
    font-size: 17px; }

  .bento-feature {
    height: 470px; }
    .bento-feature__body {
      padding: 34px; }

  .bento-row {
    gap: 20px; }

  .bento-card {
    min-height: 260px; }
    .bento-card__body {
      padding: 18px 15px 15px; }
    .bento-card__title {
      font-size: 22px; }

  /* ------------------------------
     Velocity
     ------------------------------ */
  .velocity {
    padding: 75px 0; }

  .velocity-steps {
    gap: 14px; }

  .velocity-step {
    padding: 20px; }
    .velocity-step__title {
      font-size: 22px; }

  /* ------------------------------
     Case studies
     ------------------------------ */
  .case-studies {
    padding: 75px 0; }

  .case-grid {
    gap: 20px; }

  .case-card__media {
    height: 300px; }
  .case-card__body {
    padding: 20px; }
  .case-card__title {
    font-size: 29px; }
  .case-card__desc {
    font-size: 13px; }

  /* ------------------------------
     CTA
     ------------------------------ */
  .cta {
    padding: 95px 0; }
    .cta .container {
      padding-left: 80px;
      padding-right: 80px; }
    .cta__title {
      font-size: 68px; }
    .cta__desc {
      font-size: 17px; }

  /* ================================================================
     SERVICE PAGE
     ================================================================ */
  .svc-hero {
    padding: 85px 0 90px; }

  .svc-hero__title {
    font-size: 68px;
    letter-spacing: -1.7px; }

  .svc-hero__media {
    height: 450px; }

  .svc-section {
    padding: 75px 0; }

  .svc-section-head {
    margin-bottom: 48px; }

  .svc-section-head__title {
    font-size: 48px; }

  .svc-matrix,
  .svc-matrix__row {
    gap: 20px; }

  .svc-card--featured .svc-card__media {
    height: 320px; }
  .svc-card__media {
    height: 250px; }
  .svc-card__body {
    padding: 24px; }
  .svc-card__title, .svc-card--featured .svc-card__title {
    font-size: 23px; }

  .svc-banner {
    padding-left: 24px;
    padding-right: 24px; }

  .svc-banner__grid {
    gap: 32px; }

  .svc-banner__title {
    font-size: 42px; }

  .svc-banner__photo {
    height: 320px; }

  .svc-cta {
    padding: 60px 70px; }

  .svc-cta__text {
    padding: 50px 40px; }

  .svc-cta__title {
    font-size: 46px; }

  .svc-cta__visual {
    height: 400px; }

  .svc-cta__ring {
    width: 220px;
    height: 220px; }
    .svc-cta__ring::after {
      width: 135px;
      height: 135px; }

  .svc-cta__badge .word {
    font-size: 40px; }

  /* ================================================================
     ABOUT
     ================================================================ */
  .story {
    padding: 85px 0; }

  .story__grid {
    gap: 32px; }

  .story__title {
    font-size: 42px; }

  .story__media {
    height: 400px; }

  .pillars__title,
  .leadership__title {
    font-size: 42px; }

  .pillar-grid {
    gap: 20px; }

  .pillar-card__number {
    font-size: 42px; }
  .pillar-card__title {
    font-size: 22px; }

  .leader-grid {
    gap: 20px; }

  .leader-card__photo {
    height: 200px; }
  .leader-card__name {
    font-size: 22px; }

  /* ================================================================
     CONTACT
     ================================================================ */
  .contact-section {
    padding: 85px 0; }

  .contact-grid {
    gap: 28px; }

  .contact-form {
    padding: 32px; }

  .contact-form__title {
    font-size: 30px; }

  .contact-details {
    padding: 25px; }

  .studio-card__map {
    height: 270px; }

  /* ================================================================
     FOOTER
     ================================================================ */
  .site-footer {
    padding: 50px 0; }

  .footer-grid {
    gap: 30px; }

  .footer-brand__logo {
    font-size: 42px; } }
/* ================================================================
   1199px ΓÇö TABLET LANDSCAPE / SMALL LAPTOP
   ================================================================ */
@media (max-width: 1199px) {
  h1 {
    font-size: 72px; }

  h2 {
    font-size: 40px; }

  h3 {
    font-size: 22px; }

  h4 {
    font-size: 24px; }

  .container {
    padding-left: 110px;
    padding-right: 110px; }

  /* ------------------------------
     Header
     ------------------------------ */
  .nav-header__inner {
    height: 78px;
    padding-left: 40px;
    padding-right: 40px; }
  .nav-header__logo {
    font-size: 30px; }
  .nav-header__nav {
    gap: 24px; }
  .nav-header__link {
    font-size: 15px; }

  /* ------------------------------
     Hero
     ------------------------------ */
  .hero {
    min-height: 75vh;
    padding: 80px 0; }
    .hero__container {
      padding-left: 28px;
      padding-right: 28px; }
    .hero__content {
      max-width: 760px; }
    .hero__lede {
      font-size: 17px;
      max-width: 580px;
      margin-bottom: 22px; }
    .hero__actions {
      gap: 12px; }

  /* ------------------------------
     Thesis
     ------------------------------ */
  .thesis {
    padding: 65px 0; }
    .thesis .container {
      padding-left: 50px;
      padding-right: 50px; }
    .thesis__eyebrow {
      margin-bottom: 18px; }
    .thesis__quote {
      max-width: 700px;
      font-size: 40px;
      letter-spacing: 0.7px; }
    .thesis__desc {
      margin-top: 18px; }

  /* ------------------------------
     Services
     ------------------------------ */
  .services {
    padding: 65px 0; }

  .service-cards {
    gap: 16px; }

  .service-card {
    padding: 20px;
    gap: 18px; }
    .service-card__top {
      gap: 12px; }
    .service-card__icon {
      width: 42px;
      height: 42px; }
    .service-card__title {
      font-size: 20px; }
    .service-card__desc {
      font-size: 13px; }
    .service-card__footer {
      padding-top: 11px; }

  /* ------------------------------
     Bento
     ------------------------------ */
  .bento {
    padding: 75px 0; }

  .bento__head {
    padding-bottom: 14px;
    margin-bottom: 20px; }

  .bento__desc {
    max-width: 340px;
    font-size: 16px; }

  .bento-feature {
    height: 420px; }
    .bento-feature__body {
      padding: 30px; }
    .bento-feature__desc {
      font-size: 14px; }
    .bento-feature__pill {
      padding: 5px 11px; }

  .bento-row {
    gap: 16px; }

  .bento-card {
    min-height: 230px; }
    .bento-card__body {
      padding: 16px 14px 14px; }
    .bento-card__title {
      font-size: 20px; }

  /* ------------------------------
     Velocity
     ------------------------------ */
  .velocity {
    padding: 65px 0; }

  .velocity__head {
    margin-bottom: 32px; }

  .velocity-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px; }

  .velocity-step {
    padding: 20px; }
    .velocity-step__title {
      font-size: 21px; }

  /* ------------------------------
     Case Studies
     ------------------------------ */
  .case-studies {
    padding: 65px 0; }

  .case-studies__head {
    margin-bottom: 32px; }

  .case-card__media {
    height: 270px; }
  .case-card__body {
    padding: 18px;
    gap: 12px; }
  .case-card__title {
    font-size: 26px; }
  .case-card__footer {
    padding-top: 14px;
    font-size: 13px; }

  /* ------------------------------
     Main CTA
     ------------------------------ */
  .cta {
    padding: 80px 0; }
    .cta .container {
      padding-left: 50px;
      padding-right: 50px; }
    .cta__title {
      max-width: 750px;
      font-size: 60px; }
    .cta__desc {
      font-size: 16px;
      margin-top: 18px; }
    .cta__actions {
      margin-top: 24px; }
    .cta__blob {
      width: 320px;
      height: 320px; }

  /* ================================================================
     SERVICE PAGE
     ================================================================ */
  .svc-hero {
    padding: 70px 0 75px; }

  .svc-hero__eyebrow {
    margin-bottom: 18px; }
    .svc-hero__eyebrow span {
      font-size: 13px;
      letter-spacing: 3px; }

  .svc-hero__title {
    max-width: 800px;
    font-size: 58px;
    letter-spacing: -1.45px; }

  .svc-hero__media {
    height: 390px; }
    .svc-hero__media-tag-left, .svc-hero__media-tag-right {
      top: 18px; }
    .svc-hero__media-tag-left {
      left: 18px; }
    .svc-hero__media-tag-right {
      right: 18px; }

  .svc-section {
    padding: 65px 0; }

  .svc-section-head {
    max-width: 650px;
    margin-bottom: 42px; }

  .svc-section-head__title {
    font-size: 42px; }

  .svc-matrix {
    gap: 16px; }

  .svc-matrix__row {
    gap: 16px; }

  .svc-card--featured .svc-card__media {
    height: 280px; }
  .svc-card__media {
    height: 220px; }
  .svc-card__tag {
    top: 12px;
    left: 12px;
    padding: 6px 10px; }
  .svc-card__body {
    padding: 20px; }
  .svc-card__title, .svc-card--featured .svc-card__title {
    font-size: 21px; }
  .svc-card__desc {
    font-size: 13px; }

  .svc-banner {
    padding-top: 60px;
    padding-bottom: 60px; }

  .svc-banner__grid {
    grid-template-columns: 1fr;
    gap: 35px; }

  .svc-banner__title {
    font-size: 40px; }

  .svc-banner__media {
    gap: 16px; }

  .svc-banner__photo {
    height: 300px; }

  .svc-cta {
    padding: 50px 40px; }

  .svc-cta__panel {
    grid-template-columns: 1fr 0.8fr; }

  .svc-cta__text {
    padding: 45px 35px; }

  .svc-cta__title {
    font-size: 40px; }

  .svc-cta__desc {
    font-size: 14px; }

  .svc-cta__visual {
    height: 360px;
    padding: 20px; }

  .svc-cta__ring {
    width: 190px;
    height: 190px; }
    .svc-cta__ring::before {
      inset: 10px; }
    .svc-cta__ring::after {
      width: 115px;
      height: 115px; }

  .svc-cta__badge .word {
    font-size: 34px;
    letter-spacing: 3px; }

  /* ================================================================
     ABOUT
     ================================================================ */
  .story {
    padding: 70px 0; }

  .story__grid {
    gap: 25px; }

  .story__copy {
    gap: 18px; }

  .story__title {
    font-size: 38px;
    letter-spacing: -0.9px; }

  .story__quote {
    font-size: 17px;
    padding-left: 15px; }

  .story__media {
    height: 350px; }

  .pillars,
  .leadership {
    padding: 50px 0; }

  .pillars__head,
  .leadership__head {
    margin-bottom: 35px; }

  .pillars__title,
  .leadership__title {
    font-size: 38px; }

  .pillar-grid {
    gap: 16px; }

  .pillar-card {
    padding: 18px;
    gap: 12px; }
    .pillar-card__number {
      font-size: 38px; }
    .pillar-card__title {
      font-size: 20px; }
    .pillar-card__desc {
      font-size: 14px; }

  .leader-grid {
    gap: 16px; }

  .leader-card {
    padding: 14px;
    gap: 10px; }
    .leader-card__photo {
      height: 180px; }
    .leader-card__name {
      font-size: 20px; }
    .leader-card__role {
      font-size: 10px; }

  /* ================================================================
     CONTACT
     ================================================================ */
  .contact-section {
    padding: 70px 0; }

  .contact-grid {
    gap: 24px; }

  .contact-form {
    padding: 28px;
    gap: 20px; }

  .contact-form__title {
    font-size: 28px; }

  .form-row {
    gap: 18px; }

  .form-field__input,
  .form-field__select,
  .form-field__textarea {
    font-size: 15px;
    padding: 12px 14px; }

  .form-field__textarea {
    min-height: 140px; }

  .contact-details {
    padding: 22px;
    gap: 20px; }

  .contact-details__title {
    font-size: 23px; }

  .contact-item {
    gap: 12px; }
    .contact-item__icon {
      width: 36px;
      height: 36px; }
      .contact-item__icon svg {
        width: 15px;
        height: 15px; }
    .contact-item__value {
      font-size: 15px; }
    .contact-item__sub {
      font-size: 13px; }

  .studio-card__map {
    height: 240px; }

  /* ================================================================
     FOOTER
     ================================================================ */
  .site-footer {
    padding: 45px 0; }

  .footer-grid {
    gap: 24px;
    padding-bottom: 35px; }

  .footer-brand__logo {
    font-size: 38px; }

  .footer-brand__desc {
    font-size: 13px; }

  .footer-nav a {
    font-size: 13px;
    padding: 6px 0; } }
/* ================================================================
   991px ΓÇö TABLET
   Main layout changes begin here.
   ================================================================ */
@media (max-width: 991px) {
  h1 {
    font-size: 60px; }

  h2 {
    font-size: 36px; }

  h3 {
    font-size: 21px; }

  h4 {
    font-size: 22px; }

  .container {
    padding-left: 60px;
    padding-right: 60px; }

  /* ------------------------------
     Header
     ------------------------------ */
  .nav-header__inner {
    height: 72px;
    padding-left: 25px;
    padding-right: 25px; }
  .nav-header__logo {
    font-size: 28px; }
  .nav-header__actions {
    display: none; }
  .nav-header__toggle {
    display: flex; }
  .nav-header__backdrop {
    display: block; }
  .nav-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 !important;
    width: min(320px, 82vw);
    height: 100vh;
    padding: 96px 32px 40px;
    background: #ffffff;
    box-shadow: -12px 0 32px rgba(17, 17, 17, 0.18);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    overflow-y: auto;
    pointer-events: none; }
    .nav-header__nav.is-open {
      opacity: inherit;
      pointer-events: initial; }
  .nav-header__link {
    width: 100%;
    font-size: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #ece7e6;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.35s ease, transform 0.35s ease; }
  .nav-header__nav.is-open .nav-header__link {
    opacity: 1;
    transform: translateX(0); }
    .nav-header__nav.is-open .nav-header__link:nth-child(1) {
      transition-delay: 0.08s; }
    .nav-header__nav.is-open .nav-header__link:nth-child(2) {
      transition-delay: 0.14s; }
    .nav-header__nav.is-open .nav-header__link:nth-child(3) {
      transition-delay: 0.2s; }
    .nav-header__nav.is-open .nav-header__link:nth-child(4) {
      transition-delay: 0.26s; }
    .nav-header__nav.is-open .nav-header__link:nth-child(5) {
      transition-delay: 0.32s; }
  .nav-header__nav-cta {
    display: inline-flex;
    margin-top: 24px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.35s ease, transform 0.35s ease; }
  .nav-header__nav.is-open .nav-header__nav-cta {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.38s; }

  /* ------------------------------
     Hero
     ------------------------------ */
  .hero {
    min-height: 70vh;
    padding: 70px 0; }
    .hero__container {
      padding-left: 25px;
      padding-right: 25px; }
    .hero__content {
      max-width: 680px; }
    .hero__lede {
      max-width: 540px;
      font-size: 16px;
      line-height: 1.55; }

  /* ------------------------------
     Thesis
     ------------------------------ */
  .thesis {
    padding: 55px 0; }
    .thesis .container {
      padding-left: 30px;
      padding-right: 30px; }
    .thesis__eyebrow {
      margin-bottom: 15px; }
    .thesis__quote {
      max-width: 650px;
      font-size: 36px;
      line-height: 1.05; }
    .thesis__desc {
      margin-top: 16px;
      font-size: 15px; }

  /* ------------------------------
     Services
     ------------------------------ */
  .services {
    padding: 55px 0; }

  .service-cards {
    grid-template-columns: repeat(2, 1fr); }

  .service-card {
    padding: 20px; }
    .service-card__title {
      font-size: 21px; }

  /* ------------------------------
     Bento
     ------------------------------ */
  .bento {
    padding: 65px 0; }

  .bento__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px; }

  .bento__desc {
    max-width: 600px;
    font-size: 16px; }

  .bento-feature {
    height: 400px; }
    .bento-feature__body {
      padding: 25px; }

  .bento-row {
    grid-template-columns: repeat(2, 1fr); }
    .bento-row .bento-card:last-child {
      grid-column: 1 / -1; }

  /* ------------------------------
     Velocity
     ------------------------------ */
  .velocity {
    padding: 55px 0; }

  .velocity-steps {
    grid-template-columns: repeat(2, 1fr); }

  /* ------------------------------
     Case studies
     ------------------------------ */
  .case-studies {
    padding: 55px 0; }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 20px; }

  .case-card__media {
    height: 330px; }
  .case-card__title {
    font-size: 30px; }

  /* ------------------------------
     CTA
     ------------------------------ */
  .cta {
    padding: 70px 0; }
    .cta .container {
      padding-left: 30px;
      padding-right: 30px; }
    .cta__title {
      max-width: 700px;
      font-size: 54px; }
    .cta__desc {
      max-width: 600px;
      font-size: 16px; }

  /* ================================================================
     SERVICE PAGE
     ================================================================ */
  .svc-hero {
    padding: 60px 0 65px; }

  .svc-hero__title {
    font-size: 52px;
    letter-spacing: -1.3px; }

  .svc-hero__media {
    height: 340px; }

  .svc-section {
    padding: 55px 0; }

  .svc-section-head {
    margin-bottom: 35px; }

  .svc-section-head__title {
    font-size: 38px; }

  .svc-matrix__row {
    grid-template-columns: 1fr; }

  .svc-card--featured .svc-card__media, .svc-card__media {
    height: 300px; }

  .svc-banner {
    padding: 50px 20px; }

  .svc-banner__title {
    font-size: 36px; }

  .svc-banner__media {
    gap: 12px; }

  .svc-banner__photo {
    height: 270px; }

  .svc-cta {
    padding: 40px 25px; }

  .svc-cta__panel {
    grid-template-columns: 1fr; }

  .svc-cta__text {
    padding: 40px 30px; }

  .svc-cta__title {
    font-size: 38px; }

  .svc-cta__visual {
    height: 300px; }

  /* ================================================================
     ABOUT
     ================================================================ */
  .story {
    padding: 60px 0; }

  .story__grid {
    grid-template-columns: 1fr;
    gap: 35px; }

  .story__title {
    font-size: 40px; }

  .story__media {
    height: 380px; }

  .pillars,
  .leadership {
    padding: 45px 0; }

  .pillars__title,
  .leadership__title {
    font-size: 38px; }

  .pillar-grid {
    grid-template-columns: 1fr;
    gap: 16px; }

  .pillar-card {
    padding: 22px; }

  .leader-grid {
    grid-template-columns: repeat(2, 1fr); }

  .leader-card__photo {
    height: 240px; }
  .leader-card__name {
    font-size: 22px; }

  /* ================================================================
     CONTACT
     ================================================================ */
  .contact-section {
    padding: 60px 0; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px; }

  .contact-form {
    padding: 30px; }

  .contact-form__title {
    font-size: 30px; }

  .contact-details {
    padding: 25px; }

  .studio-card__map {
    height: 280px; }

  /* ================================================================
     FOOTER
     ================================================================ */
  .site-footer {
    padding: 45px 0; }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 35px; }

  .footer-brand {
    grid-column: span 2; }

  .footer-col {
    grid-column: span 1; } }
/* ================================================================
   767px ΓÇö MOBILE
   ================================================================ */
@media (max-width: 767px) {
  /* ------------------------------
     Global spacing
     ------------------------------ */
  .container {
    padding-left: 20px;
    padding-right: 20px; }

  /* ------------------------------
     Header
     ------------------------------ */
  .nav-header__inner {
    height: 64px;
    padding-left: 20px;
    padding-right: 20px; }
  .nav-header__logo {
    font-size: 25px;
    letter-spacing: -0.35px; }
    .nav-header__logo span {
      width: 6px;
      height: 6px;
      transform: translateY(-10px); }
  .nav-header__nav {
    width: min(280px, 86vw);
    padding: 88px 24px 32px; }
  .nav-header__link {
    font-size: 18px;
    padding: 14px 0; }

  /* ------------------------------
     Ticker
     ------------------------------ */
  .ticker {
    padding: 6px 0; }

  .ticker__track {
    gap: 30px; }

  .ticker__item {
    font-size: 9px;
    letter-spacing: 0.8px; }

  .ticker__dot {
    width: 6px;
    height: 6px; }

  /* ------------------------------
     Hero
     ------------------------------ */
  .hero {
    min-height: 75vh;
    padding: 65px 0; }
    .hero__container {
      padding-left: 20px;
      padding-right: 20px; }
    .hero__content {
      max-width: 100%; }
    .hero__lede {
      font-size: 15px;
      line-height: 1.55;
      margin-bottom: 20px; }
    .hero__actions {
      flex-wrap: wrap;
      gap: 10px; }

  /* ------------------------------
     Thesis
     ------------------------------ */
  .thesis {
    padding: 50px 0; }
    .thesis .container {
      padding-left: 20px;
      padding-right: 20px; }
    .thesis__eyebrow {
      margin-bottom: 14px; }
    .thesis__quote {
      max-width: 100%;
      font-size: 30px;
      line-height: 1.1;
      letter-spacing: 0.4px; }
    .thesis__desc {
      font-size: 14px;
      line-height: 1.55;
      margin-top: 15px; }

  /* ------------------------------
     Services
     ------------------------------ */
  .services {
    padding: 50px 0; }

  .service-cards {
    grid-template-columns: 1fr;
    gap: 15px; }

  .service-card {
    padding: 20px;
    gap: 18px; }
    .service-card__top {
      gap: 12px; }
    .service-card__icon {
      width: 40px;
      height: 40px; }
      .service-card__icon svg {
        width: 20px;
        height: 20px; }
    .service-card__title {
      font-size: 21px; }
    .service-card__desc {
      font-size: 13px;
      line-height: 1.6; }
    .service-card__footer {
      padding-top: 10px;
      font-size: 10px; }

  /* ------------------------------
     Bento
     ------------------------------ */
  .bento {
    padding: 55px 0; }

  .bento__head {
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 16px; }

  .bento__desc {
    font-size: 15px;
    line-height: 1.5; }

  .bento-feature {
    height: 360px;
    margin-bottom: 15px; }
    .bento-feature__tag-live, .bento-feature__tag-spec {
      top: 12px;
      font-size: 9px;
      padding: 6px 10px; }
    .bento-feature__tag-live {
      left: 12px; }
    .bento-feature__tag-spec {
      right: 12px; }
    .bento-feature__body {
      padding: 20px;
      gap: 6px; }
    .bento-feature__desc {
      font-size: 13px; }
    .bento-feature__pills {
      gap: 5px;
      padding-top: 5px;
      flex-wrap: wrap; }
    .bento-feature__pill {
      font-size: 9px;
      padding: 4px 9px; }

  .bento-row {
    grid-template-columns: 1fr;
    gap: 15px; }
    .bento-row .bento-card:last-child {
      grid-column: auto; }

  .bento-card {
    min-height: 240px; }
    .bento-card__body {
      padding: 16px 14px 14px; }
    .bento-card__title {
      font-size: 20px; }

  /* ------------------------------
     Velocity
     ------------------------------ */
  .velocity {
    padding: 50px 0; }

  .velocity__head {
    margin-bottom: 25px; }

  .velocity-steps {
    grid-template-columns: 1fr;
    gap: 14px; }

  .velocity-step {
    padding: 20px;
    gap: 18px; }
    .velocity-step__top {
      gap: 13px; }
    .velocity-step__icon {
      width: 36px;
      height: 36px; }
      .velocity-step__icon svg {
        width: 15px;
        height: 15px; }
    .velocity-step__title {
      font-size: 21px; }
    .velocity-step__desc {
      font-size: 13px;
      line-height: 1.6; }
    .velocity-step__footer {
      padding-top: 8px;
      font-size: 10px; }

  /* ------------------------------
     Case Studies
     ------------------------------ */
  .case-studies {
    padding: 50px 0; }

  .case-studies__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 25px; }

  .case-grid {
    grid-template-columns: 1fr;
    gap: 15px; }

  .case-card__media {
    height: 250px; }
  .case-card__tags {
    top: 12px;
    left: 12px;
    gap: 5px; }
  .case-card__tag {
    padding: 4px 9px;
    font-size: 9px; }
  .case-card__year {
    bottom: 12px;
    right: 12px;
    padding: 4px 9px;
    font-size: 9px; }
  .case-card__body {
    padding: 18px;
    gap: 10px; }
  .case-card__client {
    font-size: 10px; }
  .case-card__title {
    font-size: 26px;
    margin-top: 3px; }
  .case-card__desc {
    font-size: 13px;
    line-height: 1.5; }
  .case-card__footer {
    padding-top: 13px;
    font-size: 12px; }

  /* ------------------------------
     Main CTA
     ------------------------------ */
  .cta {
    padding: 65px 0; }
    .cta .container {
      padding-left: 20px;
      padding-right: 20px; }
    .cta__title {
      max-width: 100%;
      font-size: 43px;
      line-height: 1.05; }
    .cta__desc {
      font-size: 15px;
      line-height: 1.55;
      margin-top: 16px; }
    .cta__actions {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-top: 22px; }
    .cta__blob {
      width: 240px;
      height: 240px;
      filter: blur(45px); }

  /* ================================================================
     SERVICE PAGE
     ================================================================ */
  .svc-hero {
    padding: 50px 0 55px; }

  .svc-hero__eyebrow {
    gap: 6px;
    margin-bottom: 15px; }
    .svc-hero__eyebrow .dot {
      width: 8px;
      height: 8px; }
    .svc-hero__eyebrow span {
      font-size: 11px;
      letter-spacing: 2.5px; }

  .svc-hero__title {
    max-width: 100%;
    font-size: 43px;
    line-height: 1.03;
    letter-spacing: -1px;
    margin-bottom: 12px; }

  .svc-hero__media {
    height: 280px; }
    .svc-hero__media-tag-left, .svc-hero__media-tag-right {
      top: 12px;
      font-size: 8px;
      padding: 6px 9px; }
    .svc-hero__media-tag-left {
      left: 12px; }
    .svc-hero__media-tag-right {
      right: 12px; }

  .svc-section {
    padding: 50px 0; }

  .svc-section-head {
    margin-bottom: 30px;
    gap: 9px; }

  .svc-section-head__eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px; }

  .svc-section-head__title {
    font-size: 34px;
    letter-spacing: -0.8px; }

  .svc-section-head__bar {
    width: 38px;
    height: 3px; }

  .svc-section-head__desc {
    font-size: 14px; }

  .svc-matrix,
  .svc-matrix__row {
    gap: 15px; }

  .svc-card--featured .svc-card__media, .svc-card__media {
    height: 250px; }
  .svc-card__tag {
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    font-size: 8px; }
  .svc-card__body {
    padding: 20px;
    gap: 3px; }
  .svc-card__title, .svc-card--featured .svc-card__title {
    font-size: 21px;
    letter-spacing: 0.4px; }
  .svc-card__desc {
    font-size: 13px;
    line-height: 1.5; }

  .svc-banner {
    padding: 50px 20px; }

  .svc-banner__eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px; }

  .svc-banner__title {
    font-size: 34px;
    letter-spacing: -0.8px; }

  .svc-banner__desc {
    font-size: 14px; }

  .svc-banner__stats {
    gap: 10px;
    padding-top: 20px; }

  .svc-banner__stat strong {
    font-size: 24px; }
  .svc-banner__stat span {
    font-size: 10px; }

  .svc-banner__media {
    flex-direction: column;
    gap: 12px; }

  .svc-banner__photo {
    height: 260px; }

  .svc-banner__photo-tag {
    bottom: 12px;
    left: 12px;
    right: 12px; }
    .svc-banner__photo-tag .badge-sm {
      font-size: 8px; }
    .svc-banner__photo-tag .title-sm {
      font-size: 17px; }

  .svc-cta {
    padding: 35px 20px; }

  .svc-cta__text {
    padding: 35px 25px;
    gap: 9px; }

  .svc-cta__eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px; }

  .svc-cta__title {
    font-size: 34px;
    letter-spacing: -0.8px; }

  .svc-cta__desc {
    font-size: 14px; }

  .svc-cta__actions {
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px; }

  .svc-cta__btn-primary,
  .svc-cta__btn-outline {
    padding: 12px 20px;
    font-size: 11px; }

  .svc-cta__visual {
    height: 280px;
    padding: 15px; }

  .svc-cta__ring {
    width: 170px;
    height: 170px; }
    .svc-cta__ring::before {
      inset: 9px; }
    .svc-cta__ring::after {
      width: 100px;
      height: 100px; }
    .svc-cta__ring .dot-top {
      width: 10px;
      height: 10px; }
    .svc-cta__ring .dot-bottom {
      width: 7px;
      height: 7px; }

  .svc-cta__badge .word {
    font-size: 29px;
    letter-spacing: 2.5px; }
  .svc-cta__badge .tag {
    font-size: 8px;
    letter-spacing: 2px;
    padding: 4px 9px; }

  /* ================================================================
     ABOUT PAGE
     ================================================================ */
  .story {
    padding: 55px 0; }

  .story__grid {
    grid-template-columns: 1fr;
    gap: 30px; }

  .story__copy {
    gap: 16px; }

  .story__eyebrow {
    margin-bottom: 5px; }

  .story__title {
    font-size: 34px;
    letter-spacing: -0.7px;
    line-height: 1.15; }

  .story__lede,
  .story__desc {
    font-size: 14px;
    line-height: 1.6; }

  .story__quote {
    font-size: 16px;
    line-height: 1.5;
    padding-left: 14px; }

  .story__media {
    height: 300px; }

  .pillars,
  .leadership {
    padding: 45px 0; }

  .pillars__head,
  .leadership__head {
    margin-bottom: 28px; }

  .pillars__title,
  .leadership__title {
    font-size: 34px;
    letter-spacing: -0.7px; }

  .pillar-grid {
    grid-template-columns: 1fr;
    gap: 14px; }

  .pillar-card {
    padding: 20px; }
    .pillar-card__number {
      font-size: 36px; }
    .pillar-card__title {
      font-size: 20px; }
    .pillar-card__desc {
      font-size: 14px;
      line-height: 1.55; }

  .leader-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px; }

  .leader-card {
    padding: 12px; }
    .leader-card__photo {
      height: 200px; }
    .leader-card__name {
      font-size: 19px; }
    .leader-card__role {
      font-size: 9px; }

  /* ================================================================
     CONTACT PAGE
     ================================================================ */
  .contact-section {
    padding: 50px 0; }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px; }

  .contact-form {
    padding: 22px;
    gap: 18px; }

  .contact-form__head {
    gap: 3px; }

  .contact-form__title {
    font-size: 26px; }

  .contact-form__desc {
    font-size: 13px; }

  .form-row {
    grid-template-columns: 1fr;
    gap: 15px; }

  .form-field__label {
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 6px; }

  .form-field__input,
  .form-field__select,
  .form-field__textarea {
    font-size: 14px;
    padding: 11px 13px; }

  .form-field__textarea {
    min-height: 130px; }

  .form-submit-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px; }

  .form-submit-btn {
    padding: 13px 24px;
    font-size: 11px; }

  .form-response-note {
    font-size: 12px; }

  .contact-details {
    padding: 22px;
    gap: 18px; }

  .contact-details__title {
    font-size: 22px; }

  .contact-details__list {
    gap: 16px; }

  .contact-item {
    gap: 10px; }
    .contact-item__icon {
      width: 34px;
      height: 34px; }
    .contact-item__label {
      font-size: 9px; }
    .contact-item__value {
      font-size: 14px; }
    .contact-item__sub {
      font-size: 12px; }

  .studio-card {
    margin-top: 18px; }

  .studio-card__map {
    height: 220px; }

  .studio-card__body {
    padding: 13px;
    gap: 12px; }

  .studio-card__photo {
    width: 54px;
    height: 54px; }

  .studio-card__title {
    font-size: 14px; }

  .studio-card__desc {
    font-size: 12px; }

  /* ================================================================
     FOOTER
     ================================================================ */
  .site-footer {
    padding: 40px 0; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px;
    padding-bottom: 30px; }

  .footer-brand {
    grid-column: span 2; }

  .footer-brand__logo {
    font-size: 36px;
    letter-spacing: -0.8px; }

  .footer-brand__desc {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.55; }

  .footer-brand__status {
    margin-top: 12px;
    padding: 6px 11px;
    font-size: 9px; }

  .footer-col {
    grid-column: span 1; }
    .footer-col__title {
      font-size: 10px;
      margin-bottom: 8px;
      padding-bottom: 7px; }

  .footer-nav a {
    padding: 5px 0;
    font-size: 12px; }

  .footer-contact__group {
    margin-bottom: 10px; }
  .footer-contact__label {
    font-size: 9px; }
  .footer-contact__value {
    font-size: 12px; } }
/* ================================================================
   EXTRA SMALL MOBILE
   480px
   ================================================================ */
@media (max-width: 480px) {
  h1 {
    font-size: 48px; }

  h2 {
    font-size: 32px; }

  h3 {
    font-size: 20px; }

  h4 {
    font-size: 20px; }

  .nav-header__inner {
    padding-left: 15px;
    padding-right: 15px; }
  .nav-header__logo {
    font-size: 23px; }
  .nav-header__nav {
    width: 100vw;
    padding: 84px 20px 28px; }
  .nav-header__link {
    font-size: 17px; }

  .hero {
    padding: 55px 0; }

  .hero__lede {
    font-size: 14px; }

  .thesis__quote {
    font-size: 27px; }

  .cta__title {
    font-size: 38px; }

  .svc-hero__title {
    font-size: 38px; }

  .svc-section-head__title {
    font-size: 30px; }

  .svc-banner__title {
    font-size: 30px; }

  .svc-cta__title {
    font-size: 30px; }

  .story__title,
  .pillars__title,
  .leadership__title {
    font-size: 30px; }

  .leader-grid {
    grid-template-columns: 1fr; }

  .leader-card__photo {
    height: 260px; }

  .footer-grid {
    grid-template-columns: 1fr; }

  .footer-brand,
  .footer-col {
    grid-column: span 1; } }

/*# sourceMappingURL=responsive.css.map */