:root {
      --ink: #292d73;
      --paper: #fbfaf8;
      --paper2: #f0eff6;
      --orange: #f15923;
      --pink: #bd236f;
      --muted: #666b66;
      --line: #d6d4cc;
      --max: 1380px;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--ink);
      scroll-behavior: smooth
    }

    * {
      box-sizing: border-box
    }

    body {
      margin: 0;
      background: var(--paper)
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    button {
      cursor: pointer
    }

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

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

    .wrap {
      width: min(calc(100% - 64px), var(--max));
      margin: auto
    }

    .eyebrow {
      font-size: .8rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700
    }

    .arrow {
      font-size: 1.3rem;
      line-height: 1
    }

    .topbar {
      background: var(--ink);
      color: #eeeee8;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 9px 0;
      text-align: center
    }

    header {
      position: relative;
      z-index: 10;
      background: #fff;
      border-bottom: 1px solid var(--line)
    }

    .nav {
      height: 116px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px
    }

    .brand {
      display: flex;
      align-items: center;
      flex: none
    }

    .brand img {
      width: 168px;
      height: auto
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 43px;
      height: 43px;
      background: var(--orange);
      color: var(--ink);
      font-weight: 950;
      font-size: 1.8rem;
      letter-spacing: -.14em;
      padding-right: 4px;
      clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%)
    }

    .brand-name {
      font-size: 1.55rem;
      line-height: .88;
      font-weight: 900;
      letter-spacing: -.07em;
      text-transform: uppercase
    }

    .brand-name small {
      display: block;
      font-size: .57rem;
      letter-spacing: .23em;
      margin-top: 7px;
      font-weight: 700
    }

    nav {
      display: flex;
      align-items: center;
      gap: 36px;
      font-size: .9rem;
      font-weight: 700
    }

    nav a:not(.nav-cta):hover,
    nav a:not(.nav-cta):focus-visible {
      color: var(--pink)
    }

    .nav-cta,
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      background: var(--orange);
      border: 1px solid var(--orange);
      padding: 17px 22px;
      color: var(--ink);
      font-weight: 800;
      transition: transform .2s, background .2s
    }

    .nav-cta {
      gap: 20px;
      padding: 14px 18px
    }

    .nav-cta:hover,
    .button:hover {
      transform: translateY(-2px);
      background: #ff7b49
    }

    .menu-toggle {
      display: none
    }

    .hero {
      background: var(--ink);
      color: var(--paper);
      overflow: hidden
    }

    .hero-layout {
      display: grid;
      grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr);
      min-height: 640px
    }

    .hero-copy {
      padding: 74px 34px 64px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      z-index: 1
    }

    .hero .eyebrow {
      color: var(--orange);
      display: flex;
      gap: 13px;
      align-items: center
    }

    .hero .eyebrow:before {
      content: "";
      height: 1px;
      width: 35px;
      background: var(--orange)
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0
    }

    h1 {
      font-size: clamp(3.8rem, 6.1vw, 7.3rem);
      line-height: .93;
      letter-spacing: -.072em;
      margin: 28px 0;
      max-width: 780px
    }

    h1 em {
      font-style: normal;
      color: var(--orange)
    }

    .hero-description {
      max-width: 440px;
      color: #d3d4cc;
      font-size: 1.12rem;
      line-height: 1.6;
      margin-bottom: 34px
    }

    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 26px
    }

    .text-link {
      border-bottom: 1px solid currentColor;
      padding: 8px 0;
      font-size: .94rem;
      font-weight: 700
    }

    .text-link:hover {
      color: var(--orange)
    }

    .hero-visual {
      min-height: 640px;
      position: relative;
      margin-right: calc((min(100vw, var(--max)) - 100vw)/2);
      background: #424744
    }

    .hero-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 56% center;
      position: absolute;
      inset: 0
    }

    .hero-visual:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(25, 27, 26, .14), transparent 37%), linear-gradient(0deg, rgba(25, 27, 26, .65), transparent 26%)
    }

    .image-label {
      position: absolute;
      bottom: 28px;
      left: 28px;
      z-index: 1;
      color: white;
      font-size: .76rem;
      letter-spacing: .09em;
      text-transform: uppercase;
      border: 1px solid #ffffffaa;
      padding: 10px 13px
    }

    .side-word {
      position: absolute;
      right: 24px;
      top: 31px;
      z-index: 1;
      writing-mode: vertical-rl;
      letter-spacing: .3em;
      font-weight: 800;
      font-size: .74rem;
      color: white
    }

    .value-strip {
      background: var(--orange);
      color: var(--ink)
    }

    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr)
    }

    .value-grid div {
      padding: 22px 25px;
      border-left: 1px solid #1b1d1b55;
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: .92rem;
      font-weight: 800
    }

    .value-grid div:first-child {
      border-left: 0;
      padding-left: 0
    }

    .value-grid span {
      font-size: .75rem;
      font-weight: 900;
      opacity: .63
    }

    section {
      scroll-margin-top: 20px
    }

    .section-pad {
      padding: 112px 0
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 35px;
      margin-bottom: 43px
    }

    .section-head .eyebrow,
    .story-copy .eyebrow {
      color: var(--pink)
    }

    h2 {
      font-size: clamp(2.9rem, 5vw, 5.3rem);
      line-height: 1.01;
      letter-spacing: -.06em;
      margin: 14px 0 0
    }

    .section-head p {
      font-size: 1.04rem;
      line-height: 1.6;
      color: var(--muted);
      max-width: 390px;
      margin-bottom: 4px
    }

    .catalog-note {
      border-top: 1px solid var(--line);
      padding: 14px 0 24px;
      color: var(--muted);
      font-size: .85rem
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      min-width: 0;
      transition: transform .2s, box-shadow .2s
    }

    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 34px #171a1718
    }

    .card-image {
      aspect-ratio: 1.19;
      position: relative;
      overflow: hidden;
      background: #d9d9d2
    }

    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s
    }

    .card:hover img {
      transform: scale(1.04)
    }

    .card:nth-child(2) img {
      object-position: 65% center
    }

    .card:nth-child(3) img {
      object-position: 80% center
    }

    .card-badge {
      position: absolute;
      top: 15px;
      left: 15px;
      background: var(--paper);
      padding: 8px 11px;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase
    }

    .card-body {
      padding: 27px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .card-kicker {
      font-size: .75rem;
      letter-spacing: .12em;
      color: var(--pink);
      text-transform: uppercase;
      font-weight: 800
    }

    .card h3 {
      font-size: 2rem;
      letter-spacing: -.055em;
      margin: 10px 0
    }

    .card p {
      font-size: .97rem;
      line-height: 1.55;
      color: #5e625f;
      min-height: 74px
    }

    .card-meta {
      border-top: 1px solid var(--line);
      padding-top: 16px;
      margin-top: auto;
      font-size: .84rem;
      color: #555a55;
      display: flex;
      justify-content: space-between;
      gap: 12px
    }

    .card-link {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 0;
      border-top: 1px solid var(--line);
      background: #fff;
      padding: 20px 27px;
      text-align: left;
      font-weight: 800
    }

    .card-link:hover,
    .card-link:focus-visible {
      background: var(--orange)
    }

    .portfolio {
      background: #fff
    }

    .portfolio .eyebrow {
      color: var(--pink)
    }

    .work-grid {
      display: grid;
      grid-template-columns: 1.35fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 18px
    }

    .work-card {
      border: 1px solid var(--line);
      background: var(--paper);
      min-width: 0
    }

    .work-card:first-child {
      grid-row: span 2
    }

    .work-image {
      position: relative;
      min-height: 185px;
      background: linear-gradient(135deg, #303679, #535791);
      color: #fff;
      display: grid;
      place-items: center;
      overflow: hidden
    }

    .work-image:before {
      content: "";
      position: absolute;
      inset: 17px;
      border: 1px dashed #ffffff7d;
      pointer-events: none
    }

    .work-card:first-child .work-image {
      min-height: 470px
    }

    .work-number {
      position: absolute;
      top: 32px;
      left: 34px;
      font-size: .79rem;
      font-weight: 800;
      letter-spacing: .14em
    }

    .work-placeholder {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-align: center;
      padding: 25px
    }

    .work-info {
      padding: 20px 24px 22px
    }

    .work-info h3 {
      font-size: 1.28rem;
      letter-spacing: -.035em;
      margin: 0 0 7px
    }

    .work-info p {
      font-size: .88rem;
      color: var(--muted);
      margin: 0
    }

    .portfolio-note {
      margin: 24px 0 0;
      color: var(--muted);
      font-size: .89rem;
      line-height: 1.5
    }

    .story {
      background: var(--paper2)
    }

    .story-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 7vw;
      align-items: center
    }

    .story-photo {
      position: relative;
      aspect-ratio: 1.1;
      background: #747873;
      overflow: hidden
    }

    .story-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .story-stamp {
      position: absolute;
      right: -1px;
      bottom: -1px;
      background: var(--pink);
      color: #fff;
      padding: 22px 27px;
      max-width: 220px;
      font-size: .9rem;
      font-weight: 800;
      line-height: 1.35
    }

    .story-copy h2 {
      margin: 15px 0 25px
    }

    .story-copy>p {
      font-size: 1.11rem;
      line-height: 1.65;
      color: #4d514d;
      max-width: 570px
    }

    .story-list {
      border-top: 1px solid #aaa9a1;
      margin-top: 30px
    }

    .story-list div {
      border-bottom: 1px solid #aaa9a1;
      padding: 17px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-size: .94rem;
      font-weight: 700
    }

    .story-list strong {
      color: var(--pink);
      font-size: .75rem;
      letter-spacing: .14em
    }

    .team {
      background: var(--ink);
      color: var(--paper)
    }

    .team .eyebrow {
      color: var(--orange)
    }

    .team .section-head p {
      color: #c0c2bb
    }

    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid #60635f
    }

    .team-cell {
      min-height: 230px;
      padding: 28px 38px 18px 0;
      border-right: 1px solid #60635f
    }

    .team-cell+.team-cell {
      padding-left: 38px
    }

    .team-cell:last-child {
      border-right: 0
    }

    .team-cell .num {
      font-size: .79rem;
      color: var(--orange);
      letter-spacing: .13em;
      font-weight: 800
    }

    .team-cell h3 {
      font-size: 1.75rem;
      letter-spacing: -.045em;
      margin: 30px 0 12px
    }

    .team-cell p {
      color: #c0c2bb;
      font-size: .97rem;
      line-height: 1.55;
      max-width: 290px
    }

    .contact {
      background: var(--pink);
      color: #fff;
      padding: 96px 0
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 7vw
    }

    .contact h2 {
      margin: 15px 0 22px
    }

    .contact-copy p {
      line-height: 1.6;
      font-size: 1.05rem;
      max-width: 430px
    }

    .contact-tag {
      font-size: .78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
      display: inline-block;
      border: 1px solid #fff;
      padding: 11px 13px;
      margin-top: 36px
    }

    .form-shell {
      background: var(--paper);
      color: var(--ink);
      padding: 30px
    }

    .form-shell h3 {
      font-size: 1.55rem;
      letter-spacing: -.04em;
      margin-bottom: 8px
    }

    .form-shell>p {
      font-size: .9rem;
      color: #606460;
      line-height: 1.45
    }

    .fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 22px
    }

    label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: .78rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    label.full {
      grid-column: 1/-1
    }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid #c7c8c0;
      background: white;
      border-radius: 0;
      padding: 13px 12px;
      color: var(--ink);
      font-size: 1rem;
      font-weight: 400;
      letter-spacing: normal;
      text-transform: none;
      min-height: 48px
    }

    textarea {
      resize: vertical;
      min-height: 88px
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 2px solid var(--orange);
      outline-offset: 2px
    }

    .form-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 20px
    }

    .form-actions button {
      background: var(--ink);
      color: white;
      border: 0;
      padding: 17px 20px;
      font-weight: 800
    }

    .form-actions button:hover {
      background: #3c403d
    }

    .form-actions span {
      font-size: .78rem;
      line-height: 1.4;
      color: #696c66;
      max-width: 230px
    }

    .brief-result {
      margin-top: 18px;
      background: #eae9e1;
      padding: 17px;
      border-left: 3px solid var(--orange);
      white-space: pre-wrap;
      font-size: .89rem;
      line-height: 1.55
    }

    .copy-button {
      margin-top: 12px;
      background: transparent;
      border: 1px solid var(--ink);
      padding: 10px 14px;
      font-weight: 700
    }

    footer {
      background: #202457;
      color: #cbcec8;
      padding: 42px 0 27px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      align-items: start
    }

    .footer-brand {
      display: inline-block;
      background: #fff;
      padding: 10px
    }

    .footer-brand img {
      width: 238px;
      height: auto
    }

    footer p {
      max-width: 370px;
      font-size: .9rem;
      line-height: 1.5;
      margin: 15px 0 0
    }

    .footer-nav {
      display: flex;
      justify-content: flex-end;
      gap: 24px;
      font-size: .88rem;
      font-weight: 700
    }

    .footer-line {
      border-top: 1px solid #474a45;
      margin-top: 70px;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-size: .75rem;
      color: #9a9f98
    }

    @media(max-width:1000px) {
      nav {
        gap: 18px
      }

      .hero-layout {
        grid-template-columns: 1fr 1fr
      }

      .hero-copy {
        padding-right: 25px
      }

      h1 {
        font-size: clamp(3.4rem, 6.5vw, 5rem)
      }

      .hero-visual {
        min-height: 580px
      }

      .story-grid {
        gap: 40px
      }
    }

    @media(max-width:720px) {
      .wrap {
        width: min(calc(100% - 36px), var(--max))
      }

      .topbar {
        font-size: .68rem
      }

      .nav {
        height: 92px
      }

      .brand img {
        width: 134px
      }

      .menu-toggle {
        display: block;
        background: transparent;
        border: 1px solid #999d97;
        padding: 8px 12px;
        font-weight: 700
      }

      nav {
        display: none;
        position: absolute;
        top: 92px;
        left: 0;
        right: 0;
        background: var(--paper);
        padding: 20px 18px 25px;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 12px 25px #17191720;
        flex-direction: column;
        align-items: stretch
      }

      nav.open {
        display: flex
      }

      .hero-layout {
        display: block
      }

      .hero-copy {
        padding: 65px 0 48px
      }

      .hero-description {
        font-size: 1.03rem
      }

      h1 {
        font-size: clamp(3.5rem, 12vw, 5.5rem);
        max-width: 650px
      }

      .hero-visual {
        min-height: 430px;
        margin: 0 -18px
      }

      .image-label {
        bottom: 16px;
        left: 18px
      }

      .value-grid {
        display: block;
        padding: 10px 0
      }

      .value-grid div,
      .value-grid div:first-child {
        border: 0;
        border-bottom: 1px solid #1b1d1b55;
        padding: 14px 0
      }

      .value-grid div:last-child {
        border: 0
      }

      .section-pad {
        padding: 72px 0
      }

      .section-head {
        display: block
      }

      .section-head p {
        margin: 20px 0 0
      }

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

      .card p {
        min-height: 0
      }

      .card-image {
        aspect-ratio: 1.4
      }

      .story-grid {
        grid-template-columns: 1fr
      }

      .story-photo {
        aspect-ratio: 1.28
      }

      .team-grid {
        display: block
      }

      .team-cell,
      .team-cell+.team-cell {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid #60635f;
        padding: 20px 0
      }

      .team-cell h3 {
        margin: 15px 0 7px
      }

      .contact {
        padding: 72px 0
      }

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

      .contact-tag {
        margin-top: 8px
      }

      .form-shell {
        padding: 22px
      }

      .footer-grid {
        display: block
      }

      .footer-nav {
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 28px
      }

      .footer-line {
        margin-top: 40px;
        display: block
      }

      .footer-line span {
        display: block;
        margin-bottom: 8px
      }
    }

    @media(max-width:720px) {
      .work-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto
      }

      .work-card:first-child {
        grid-row: auto
      }

      .work-card:first-child .work-image {
        min-height: 280px
      }

      .work-image {
        min-height: 220px
      }
    }

    @media(max-width:430px) {
      h1 {
        font-size: 3.35rem
      }

      .hero-visual {
        min-height: 310px
      }

      .fields {
        grid-template-columns: 1fr
      }

      .form-shell {
        padding: 18px
      }

      .footer-brand img {
        width: 190px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      :root {
        scroll-behavior: auto
      }

      *,
      *:before,
      *:after {
        transition: none !important
      }
    }