@layer foundation, components, accessibility;
@layer foundation {
  :root:where([data-page=home]) {
    --cream: #f2efe9;
    --paper: #fbfaf6;
    --ink: #252824;
    --dark: #222622;
    --charcoal: #30332f;
    --brown: #54473b;
    --signal: #f2db38;
    --muted: #777970;
    --line: #d9d4ca;
    --white: #fff;
    --pad: clamp(20px,4.2vw,68px);
    --max: 1600px;
    --ease: cubic-bezier(.22,.75,.24,1)
  }
  :where(html[data-page=home]) * {
    box-sizing: border-box
  }
  html:where([data-page=home]) {
    scroll-behavior: smooth
  }
  :where(html[data-page=home]) body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
  }
  :where(html[data-page=home]) a {
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=home]) .shell {
    width: min(var(--max),calc(100% - var(--pad)*2));
    margin: auto
  }
  :where(html[data-page=home]) .kicker {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=home]) .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=home]) .hero {
    position: relative;
    min-height: calc(100svh - 110px);
    margin: 0 clamp(14px,2vw,30px) clamp(14px,2vw,30px);
    border-radius: 28px;
    background: var(--dark);
    color: #fff;
    overflow: hidden
  }
  :where(html[data-page=home]) .hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  :where(html[data-page=home]) .hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(37,40,36,.5),rgba(37,40,36,.5)),linear-gradient(90deg,rgba(24,26,23,.88)0,rgba(24,26,23,.66) 42%,rgba(24,26,23,.38) 72%,rgba(24,26,23,.34) 100%)
  }
  :where(html[data-page=home]) .hero-content {
    position: relative;
    z-index: 2;
    min-height: calc(100svh - 110px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(48px,6vw,90px)0 clamp(56px,7vw,95px)
  }
  :where(html[data-page=home]) .hero-copy {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 60px;
    align-items: end
  }
  :where(html[data-page=home]) .hero h1 {
    font-size: clamp(62px,7.6vw,144px);
    font-weight: 400;
    letter-spacing: -.075em;
    line-height: .84;
    margin: 0;
    max-width: 1050px
  }
  :where(html[data-page=home]) .hero h1 em {
    font-style: normal;
    color: var(--signal)
  }
  :where(html[data-page=home]) .hero-side {
    max-width: 390px;
    justify-self: end;
    padding-bottom: 4px
  }
  :where(html[data-page=home]) .hero-side p {
    font-size: 16px;
    line-height: 1.45;
    margin: 0 0 24px
  }
  :where(html[data-page=home]) .hero-meta {
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.8)
  }
  :where(html[data-page=home]) .pause {
    padding: clamp(110px,15vw,220px)0;
    background: var(--cream)
  }
  :where(html[data-page=home]) .pause .inner {
    display: grid;
    grid-template-columns: .35fr .65fr;
    gap: 40px;
    border-top: 1px solid var(--line);
    padding-top: 20px
  }
  :where(html[data-page=home]) .pause blockquote {
    font-size: clamp(36px,5.4vw,82px);
    line-height: .98;
    letter-spacing: -.06em;
    margin: 0;
    font-weight: 400;
    max-width: 1050px
  }
  :where(html[data-page=home]) .hard-head h2 span,
:where(html[data-page=home]) .pause blockquote span {
    color: inherit
  }
  :where(html[data-page=home]) .hard {
    padding: 0 0 clamp(100px,12vw,180px)
  }
  :where(html[data-page=home]) .hard-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    padding: 26px 0 54px;
    border-top: 1px solid var(--line)
  }
  :where(html[data-page=home]) .hard-head h2 {
    font-size: clamp(46px,6.4vw,96px);
    font-weight: 400;
    letter-spacing: -.067em;
    line-height: .9;
    margin: 0
  }
  :where(html[data-page=home]) .hard-head p {
    font-size: clamp(18px,1.6vw,25px);
    line-height: 1.45;
    max-width: 610px;
    margin: 8px 0 0;
    align-self: end
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr))
    }
    :where(html[data-page=home]) .tile {
      position: relative;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 0;
      transition: transform .45s var(--ease),box-shadow .45s var(--ease)
    }
    :where(html[data-page=home]) .tile:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 50px rgba(35,38,34,.08)
    }
    :where(html[data-page=home]) .tile.dark {
      background: var(--brown);
      color: #fff
    }
    :where(html[data-page=home]) .tile.charcoal {
      background: #242b2d;
      color: #fff
    }
    :where(html[data-page=home]) .tile .num {
      text-transform: uppercase;
      opacity: .68
    }
    :where(html[data-page=home]) .tile h3 {
      font-weight: 400;
      letter-spacing: -.052em;
      margin: 0
    }
    :where(html[data-page=home]) .tile p {
      margin: 0;
      max-width: 390px
    }
    :where(html[data-page=home]) .tile.photo-card {
      background: #e9e3d8;
      color: var(--ink)
    }
    :where(html[data-page=home]) .tile-photo {
      overflow: hidden;
      margin: 0
    }
    :where(html[data-page=home]) .tile-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter .55s var(--ease),transform .75s var(--ease)
    }
    :where(html[data-page=home]) .tile:hover .tile-photo img {
      filter: saturate(1) contrast(1);
      transform: scale(1.02)
    }
    :where(html[data-page=home]) .tile-body {
      display: flex;
      justify-content: space-between;
      gap: 18px
    }
    :where(html[data-page=home]) .tile-body h3 {
      max-width: 82%
    }
    :where(html[data-page=home]) .trust-visual {
      overflow: hidden;
      background: #e9e2d6;
      position: relative;
      width: 100%;
      max-width: none;
      aspect-ratio: 16/10
    }
    :where(html[data-page=home]) .trust-visual img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: top;
      filter: saturate(.62) contrast(.98);
      position: absolute;
      top: 0;
      left: 0;
      display: block
    }
    :where(html[data-page=home]) .trust-foot {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 18px
    }
    :where(html[data-page=home]) .trust-foot p {
      color: rgba(255,255,255,.72)
    }
    :where(html[data-page=home]) .stat-wrap {
      display: grid;
      grid-template-columns: 1fr 96px;
      gap: 14px;
      align-items: end
    }
    :where(html[data-page=home]) .stat {
      font-size: clamp(92px,8.4vw,145px);
      line-height: .8;
      letter-spacing: -.08em;
      font-weight: 400
    }
    :where(html[data-page=home]) .query {
      font-size: clamp(18px,1.7vw,27px);
      line-height: 1.2;
      letter-spacing: -.03em;
      margin: 20px 0 8px;
      color: rgba(255,255,255,.74)
    }
    :where(html[data-page=home]) .ai-foot {
      justify-content: space-between
    }
    :where(html[data-page=home]) .bridge-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(37,40,36,.2);
      padding-top: 14px
    }
  }
  :where(html[data-page=home]) .perspective {
    background: var(--charcoal);
    color: #fff;
    border-top: 1px solid rgba(37,40,36,.18)
  }
  :where(html[data-page=home]) .perspective-top {
    display: grid;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.24)
  }
  :where(html[data-page=home]) .perspective h2 {
    font-weight: 400;
    font-size: clamp(54px,7vw,105px);
    line-height: .92;
    letter-spacing: -.07em;
    margin: 55px 0 0
  }
  :where(html[data-page=home]) .perspective h2 span {
    color: var(--signal)
  }
  :where(html[data-page=home]) .perspective-copy {
    align-self: end;
    font-size: clamp(19px,1.8vw,28px);
    line-height: 1.42
  }
  :where(html[data-page=home]) .perspective-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    font-size: 13px;
    color: rgba(255,255,255,.7)
  }
  :where(html[data-page=home]) .perspective-bottom a {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.55);
    padding-bottom: 6px
  }
  :where(html[data-page=home]) .process {
    padding: clamp(100px,12vw,180px)0
  }
  :where(html[data-page=home]) .process-head {
    display: grid;
    grid-template-columns: .35fr .65fr;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-bottom: 54px
  }
  :where(html[data-page=home]) .process h2 {
    font-size: clamp(52px,7vw,105px);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.068em;
    margin: 0
  }
  :where(html[data-page=home]) .steps {
    border-top: 1px solid var(--line)
  }
  :where(html[data-page=home]) .step {
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: 30px;
    padding: 25px 0;
    border-bottom: 1px solid var(--line);
    align-items: start
  }
  :where(html[data-page=home]) .step .n {
    font-size: 10px;
    letter-spacing: .14em
  }
  :where(html[data-page=home]) .step h3 {
    font-size: clamp(30px,3.2vw,52px);
    font-weight: 400;
    letter-spacing: -.05em;
    margin: 0
  }
  :where(html[data-page=home]) .step p {
    font-size: 16px;
    line-height: 1.5;
    margin: 4px 0 0;
    max-width: 520px;
    color: #5f625b
  }
  :where(html[data-page=home]) .closer {
    background: var(--signal);
    color: var(--ink);
    padding: clamp(100px,13vw,190px)0
  }
  :where(html[data-page=home]) .closer h2 {
    font-size: clamp(60px,9vw,145px);
    line-height: .83;
    letter-spacing: -.078em;
    font-weight: 400;
    margin: 0;
    max-width: 1200px
  }
  :where(html[data-page=home]) .closer .bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 70px;
    padding-top: 20px;
    border-top: 1px solid rgba(37,40,36,.18)
  }
  :where(html[data-page=home]) .closer p {
    font-size: 18px;
    max-width: 540px;
    line-height: 1.5
  }
  :where(html[data-page=home]) .closer .cta {
    color: var(--ink)
  }
  :where(html[data-page=home]) .cta {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 7px
  }
  :where(html[data-page=home]) .reveal {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--ease),transform .8s var(--ease)
  }
  @media (max-width:900px) {
    :where(html[data-page=home]) .hero {
      margin: 0 10px 10px;
      border-radius: 20px;
      min-height: calc(100svh - 82px)
    }
    :where(html[data-page=home]) .hard-head,
:where(html[data-page=home]) .hero-copy,
:where(html[data-page=home]) .pause .inner,
:where(html[data-page=home]) .perspective-top,
:where(html[data-page=home]) .process-head {
      grid-template-columns: 1fr
    }
    :where(html[data-page=home]) .hero-content {
      min-height: calc(100svh - 82px);
      padding: 42px 0
    }
    :where(html[data-page=home]) .hero h1 {
      font-size: clamp(54px,16vw,88px);
      max-width: 95%
    }
    :where(html[data-page=home]) .hero-side {
      justify-self: start;
      max-width: 390px
    }
    :where(html[data-page=home]) .pause {
      padding: 90px 0
    }
    :where(html[data-page=home]) .pause blockquote {
      font-size: clamp(38px,11.5vw,62px)
    }
    :where(html[data-page=home]) .hard-head h2 {
      font-size: clamp(45px,13vw,70px)
    }
    :where(html[data-page=home]) .perspective-bottom {
      flex-direction: column
    }
    :where(html[data-page=home]) .step {
      grid-template-columns: 48px 1fr
    }
    :where(html[data-page=home]) .step p {
      grid-column: 2
    }
    :where(html[data-page=home]) .closer .bottom {
      align-items: flex-start;
      flex-direction: column;
      gap: 30px
    }
  }
  @media (max-width:520px) {
    :root:where([data-page=home]) {
      --pad: 18px
    }
    :where(html[data-page=home]) .hero-meta {
      font-size: 8px
    }
    :where(html[data-page=home]) .hero h1 {
      font-size: 15vw
    }
    :where(html[data-page=home]) .hero-side p {
      font-size: 15px
    }
    :where(html[data-page=home]) .pause blockquote {
      font-size: 12vw
    }
    :where(html[data-page=home]) .hard {
      padding-bottom: 90px
    }
    :where(html[data-page=home]) .hard-head {
      padding-bottom: 36px
    }
    :where(html[data-page=home]) .hard-head p {
      font-size: 17px
    }
    :where(html[data-page=home]) .perspective h2,
:where(html[data-page=home]) .process h2 {
      font-size: 14vw
    }
    :where(html[data-page=home]) .step h3 {
      font-size: 9vw
    }
    :where(html[data-page=home]) .closer h2 {
      font-size: 15vw
    }
  }
  @media (prefers-reduced-motion:reduce) {
    :where(html[data-page=home]) .reveal {
      opacity: 1;
      transform: none
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile.photo-card .tile-photo {
      height: 66%
    }
    :where(html[data-page=home]) .tile.photo-card .tile-photo img {
      filter: saturate(.78) contrast(.98)
    }
    :where(html[data-page=home]) .tile.ai-card {
      background: #242b2d;
      color: #fff
    }
    :where(html[data-page=home]) .tile.point-card {
      background: #f2efe9;
      color: #252824;
      padding: 0
    }
    :where(html[data-page=home]) .tile.point-card .point-copy {
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1
    }
    :where(html[data-page=home]) .tile.signal {
      background: var(--signal);
      color: var(--ink)
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=home]) .perspective-bottom {
      margin-top: 32px
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile h3 {
      line-height: .95
    }
    :where(html[data-page=home]) .tile p {
      font-size: 15px;
      line-height: 1.45
    }
    :where(html[data-page=home]) .tile-photo {
      height: 71%
    }
    :where(html[data-page=home]) .tile-photo img {
      filter: saturate(.65) contrast(.98)
    }
    :where(html[data-page=home]) .tile-body {
      padding: 18px 22px 22px;
      align-items: end
    }
    :where(html[data-page=home]) .tile-body.compact {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 16px
    }
    :where(html[data-page=home]) .tile-note {
      font-size: 14px;
      white-space: nowrap;
      opacity: .86;
      padding-bottom: 6px
    }
    :where(html[data-page=home]) .trust-visual {
      border-radius: 12px
    }
    :where(html[data-page=home]) .trust-foot span {
      white-space: nowrap
    }
    :where(html[data-page=home]) .stat-tile .stat-wrap {
      display: block
    }
    :where(html[data-page=home]) .bridge-line {
      font-size: 13px
    }
  }
  :where(html[data-page=home]) .perspective-copy {
    max-width: 600px
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile.charcoal.ai-card {
      padding: 28px 30px 30px;
      background: #232a2c
    }
    :where(html[data-page=home]) .point-card {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr auto;
      gap: 20px
    }
    :where(html[data-page=home]) .point-card .num {
      grid-column: 1/2;
      align-self: start
    }
    :where(html[data-page=home]) .point-card .point-copy {
      grid-column: 2/3;
      grid-row: 1/3;
      align-self: start;
      justify-self: end
    }
    :where(html[data-page=home]) .point-card h3 {
      grid-column: 2/3;
      grid-row: 3/4;
      align-self: end;
      justify-self: end
    }
  }
  :where(html[data-page=home]) .hard-head {
    padding-bottom: 48px
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile-grid {
      gap: 18px;
      grid-auto-rows: clamp(380px,29vw,464px);
      align-items: stretch
    }
    :where(html[data-page=home]) .tile {
      border-radius: 18px;
      padding: 26px
    }
    :where(html[data-page=home]) .tile .num {
      min-height: 18px;
      font-size: 10px;
      letter-spacing: .17em
    }
    :where(html[data-page=home]) .tile h3 {
      font-size: clamp(29px,2.55vw,45px)
    }
    :where(html[data-page=home]) .tile.photo-card {
      padding: 0
    }
    :where(html[data-page=home]) .tile.photo-card .tile-body {
      padding: 20px 22px 22px
    }
    :where(html[data-page=home]) .trust-visual {
      margin: 18px 0 16px
    }
    :where(html[data-page=home]) .trust-foot p {
      max-width: 25ch
    }
    :where(html[data-page=home]) .trust-foot span {
      font-size: 13px
    }
    :where(html[data-page=home]) .stat-tile,
:where(html[data-page=home]) .tile.dark {
      padding: 26px
    }
    :where(html[data-page=home]) .stat-tile .stat {
      font-size: clamp(100px,9.2vw,150px);
      margin: 18px 0 30px
    }
    :where(html[data-page=home]) .stat-head {
      max-width: 11ch
    }
    :where(html[data-page=home]) .ai-foot small {
      padding-bottom: 4px
    }
    :where(html[data-page=home]) .bridge-tile {
      padding: 26px
    }
  }
  :where(html[data-page=home]) .tile-grid .tile.reveal {
    transform: none;
    opacity: 1;
    transition: opacity .58s var(--ease),transform .58s var(--ease),box-shadow .45s var(--ease)
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .tile-grid .tile:nth-child(1) {
      transition-delay: .03s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(2) {
      transition-delay: .1s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(3) {
      transition-delay: .17s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(4) {
      transition-delay: .24s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(5) {
      transition-delay: .31s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(6) {
      transition-delay: .38s
    }
  }
  :where(html[data-page=home]) .perspective {
    padding: clamp(90px,10vw,135px)0
  }
  :where(html[data-page=home]) .perspective-top {
    grid-template-columns: 1fr .75fr;
    gap: 60px
  }
  :where(html[data-page=home]) .perspective h2 {
    margin-top: 42px
  }
  :where(html[data-page=home]) .journey-minimal {
    margin-top: 70px;
    border-top: 1px solid rgba(255,255,255,.22);
    border-bottom: 1px solid rgba(255,255,255,.22);
    padding: 42px 0 38px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end
  }
  :where(html[data-page=home]) .journey-line {
    display: flex;
    align-items: center;
    gap: clamp(16px,2.8vw,42px);
    font-size: clamp(36px,5.8vw,86px);
    letter-spacing: -.055em;
    line-height: .95;
    white-space: nowrap
  }
  :where(html[data-page=home]) .journey-line .arrow {
    font-size: .62em;
    color: rgba(255,255,255,.34);
    letter-spacing: 0
  }
  :where(html[data-page=home]) .journey-line .home {
    color: var(--signal)
  }
  :where(html[data-page=home]) .journey-home {
    align-self: end;
    text-align: right
  }
  :where(html[data-page=home]) .journey-home .small {
    display: block;
    font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 9px
  }
  :where(html[data-page=home]) .journey-home .place {
    font-size: clamp(20px,2vw,30px);
    color: #fff
  }
  :where(html[data-page=home]) .perspective-bottom {
    margin-top: 28px;
    border-top: 0;
    padding-top: 0
  }
  @media (max-width:900px) {
    :where(html[data-page=home]) .journey-minimal {
      grid-template-columns: 1fr
    }
    :where(html[data-page=home]) .journey-line {
      flex-wrap: wrap;
      white-space: normal
    }
    :where(html[data-page=home]) .journey-home {
      text-align: left
    }
  }
  @media (max-width:600px) {
    :where(html[data-page=home]) .journey-line {
      font-size: 12vw;
      gap: 12px 18px
    }
    :where(html[data-page=home]) .journey-line .arrow {
      font-size: .55em
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-card>div:first-child {
      min-height: 82px
    }
    :where(html[data-page=home]) .point-card .point-copy,
:where(html[data-page=home]) .point-card h3 {
      z-index: 2
    }
    :where(html[data-page=home]) .point-card .point-path path {
      fill: none;
      stroke: #8e918b;
      stroke-width: .75;
      stroke-dasharray: 2.2 3.2;
      vector-effect: non-scaling-stroke
    }
    :where(html[data-page=home]) .point-card .point-path circle {
      fill: #f2db38;
      stroke: #3c3f3a;
      stroke-width: .35;
      vector-effect: non-scaling-stroke
    }
  }
  :where(html[data-page=home]) .hero-meta {
    font-size: 12px;
    letter-spacing: .17em;
    font-weight: 500
  }
  :where(html[data-page=home]) .hero-meta span:first-child {
    color: var(--signal)
  }
  :where(html[data-page=home]) .hero-meta span:last-child {
    color: var(--signal)
  }
  @media (max-width:700px) {
    :where(html[data-page=home]) .hero-meta {
      font-size: 11px
    }
  }
  :where(html[data-page=home]) .hero .audit-link:hover,
:where(html[data-page=home]) .hero-side .audit-link:hover {
    opacity: .8
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .hard .tile {
      --pad-y: 24px
    }
    :where(html[data-page=home]) .hard .dark {
      grid-template-columns: minmax(0,1fr)
    }
    :where(html[data-page=home]) .ai-card {
      isolation: isolate
    }
    :where(html[data-page=home]) .ai-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: var(--ai-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: .94;
      transform: none
    }
    :where(html[data-page=home]) .ai-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg,rgba(22,29,31,.6)0,rgba(22,29,31,.06) 34%,rgba(22,29,31,.06) 62%,rgba(22,29,31,.72) 100%),linear-gradient(90deg,rgba(22,29,31,.34)0,rgba(22,29,31,0) 55%);
      pointer-events: none
    }
    :where(html[data-page=home]) .ai-card .ai-foot,
:where(html[data-page=home]) .ai-card .ai-top {
      z-index: 2
    }
    :where(html[data-page=home]) .ai-card .ai-top {
      top: 26px;
      left: 26px;
      right: 26px
    }
    :where(html[data-page=home]) .ai-card .ai-foot {
      left: 26px;
      right: 26px;
      bottom: 26px
    }
    :where(html[data-page=home]) .ai-card .ai-foot small {
      text-transform: uppercase;
      white-space: nowrap
    }
  }
  :where(html[data-page=home]) .audit-link::after {
    font-family: Arial,sans-serif;
    vertical-align: .02em
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-hud {
      inset: 0;
      z-index: 0
    }
    :where(html[data-page=home]) .ai-hud svg {
      width: 100%;
      height: 100%;
      display: block
    }
    :where(html[data-page=home]) .ai-top {
      z-index: 2
    }
    :where(html[data-page=home]) .ai-foot {
      z-index: 2;
      align-items: end;
      gap: 18px
    }
    :where(html[data-page=home]) .ai-foot small {
      white-space: nowrap
    }
  }
  :where(html[data-page=home]) .audit-link::after,
:where(html[data-page=home]) .closer .cta::after,
:where(html[data-page=home]) .hero .audit-link::after,
:where(html[data-page=home]) .perspective-bottom a::after {
    display: inline-block;
    margin-left: .35em;
    font-size: .9em;
    line-height: 1;
    transform: translateY(-.02em)
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-foot small {
      text-transform: uppercase
    }
    :where(html[data-page=home]) .hud-label {
      position: absolute;
      z-index: 1;
      text-transform: uppercase;
      white-space: nowrap
    }
    :where(html[data-page=home]) .hud-label.coords {
      text-align: right
    }
  }
  :where(html[data-page=home]) .home-proof {
    background: #202625;
    color: #fff;
    padding: clamp(90px,9vw,130px)0
  }
  :where(html[data-page=home]) .home-proof-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: end
  }
  :where(html[data-page=home]) .home-proof h2 {
    margin: 16px 0 0;
    font-size: clamp(58px,7vw,104px);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=home]) .home-proof-copy {
    max-width: 520px;
    justify-self: end
  }
  :where(html[data-page=home]) .proof-client {
    font-size: 14px;
    margin-bottom: 24px;
    color: rgba(255,255,255,.9)
  }
  :where(html[data-page=home]) .home-proof-copy p {
    margin: 0;
    color: rgba(255,255,255,.66);
    line-height: 1.5;
    font-size: 16px
  }
  :where(html[data-page=home]) .home-proof-metrics {
    margin-top: 54px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    overflow: hidden
  }
  :where(html[data-page=home]) .proof-metric {
    min-height: 190px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }
  :where(html[data-page=home]) .proof-metric+.proof-metric {
    border-left: 1px solid rgba(255,255,255,.18)
  }
  :where(html[data-page=home]) .proof-metric strong {
    font-size: clamp(60px,6vw,92px);
    line-height: .85;
    letter-spacing: -.06em;
    font-weight: 500
  }
  :where(html[data-page=home]) .proof-metric.outcome strong {
    font-size: clamp(38px,4.5vw,64px);
    line-height: .9
  }
  :where(html[data-page=home]) .proof-metric span {
    max-width: 18ch;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.4
  }
  :where(html[data-page=home]) .home-proof-visual {
    margin-top: 26px;
    border-radius: 20px;
    overflow: hidden;
    background: #161a18
  }
  :where(html[data-page=home]) .home-proof-visual img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain
  }
  :where(html[data-page=home]) .home-proof-foot {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    margin-top: 16px;
    color: rgba(255,255,255,.52);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase
  }
  :where(html[data-page=home]) .home-proof-foot a {
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.6);
    padding-bottom: 4px
  }
  :where(html[data-page=home]) .home-proof-foot a::after {
    content: "↗";
    margin-left: .4em
  }
  @media (max-width:800px) {
    :where(html[data-page=home]) .home-proof {
      padding: 78px 0 86px
    }
    :where(html[data-page=home]) .home-proof-head {
      grid-template-columns: 1fr;
      gap: 34px
    }
    :where(html[data-page=home]) .home-proof-copy {
      justify-self: start
    }
    :where(html[data-page=home]) .home-proof h2 {
      font-size: clamp(50px,14vw,76px);
      max-width: 8ch
    }
    :where(html[data-page=home]) .home-proof-metrics {
      grid-template-columns: 1fr
    }
    :where(html[data-page=home]) .proof-metric {
      min-height: 150px
    }
    :where(html[data-page=home]) .proof-metric+.proof-metric {
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,.18)
    }
    :where(html[data-page=home]) .proof-metric.outcome strong {
      font-size: 44px
    }
    :where(html[data-page=home]) .home-proof-foot {
      align-items: flex-start;
      flex-direction: column
    }
  }
  :where(html[data-page=home]) .site-header {
    position: relative;
    z-index: 30;
    padding: 20px 0;
    background: #f2efe9;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=home]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=home]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=home]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=home]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=home]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=home]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=home]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=home]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=home]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=home]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=home]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=home]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=home]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=home]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=home]) .site-header .inner {
      width: calc(100% - 36px)
    }
    :where(html[data-page=home]) .site-header nav {
      font-size: 9px;
      gap: clamp(6px,2vw,10px);
      letter-spacing: .04em
    }
  }
  @media (max-width:760px) {
    :where(html[data-page=home]) .tile {
      background: #fff;
      transition: transform .45s var(--ease),box-shadow .45s var(--ease)
    }
    :where(html[data-page=home]) .tile:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 50px rgba(35,38,34,.08)
    }
    :where(html[data-page=home]) .tile.dark {
      background: var(--brown);
      color: #fff
    }
    :where(html[data-page=home]) .tile.charcoal {
      background: #242b2d;
      color: #fff
    }
    :where(html[data-page=home]) .tile .num {
      text-transform: uppercase;
      opacity: .68
    }
    :where(html[data-page=home]) .tile h3 {
      font-weight: 400;
      letter-spacing: -.052em;
      line-height: .95;
      font-size: clamp(29px,2.55vw,45px)
    }
    :where(html[data-page=home]) .tile.photo-card {
      background: #e9e3d8;
      color: var(--ink)
    }
    :where(html[data-page=home]) .tile-photo img {
      transition: filter .55s var(--ease),transform .75s var(--ease)
    }
    :where(html[data-page=home]) .tile:hover .tile-photo img {
      filter: saturate(1) contrast(1);
      transform: scale(1.02)
    }
    :where(html[data-page=home]) .trust-visual {
      background: #e9e2d6
    }
    :where(html[data-page=home]) .trust-visual img {
      filter: saturate(.62) contrast(.98)
    }
    :where(html[data-page=home]) .trust-foot p {
      color: rgba(255,255,255,.72)
    }
    :where(html[data-page=home]) .stat {
      font-size: clamp(92px,8.4vw,145px);
      line-height: .8;
      letter-spacing: -.08em;
      font-weight: 400
    }
    :where(html[data-page=home]) .query {
      font-size: clamp(18px,1.7vw,27px);
      line-height: 1.2;
      letter-spacing: -.03em;
      color: rgba(255,255,255,.74)
    }
    :where(html[data-page=home]) .bridge-line {
      border-top: 1px solid rgba(37,40,36,.2)
    }
    :where(html[data-page=home]) .tile.photo-card .tile-photo img {
      filter: saturate(.78) contrast(.98)
    }
    :where(html[data-page=home]) .tile.ai-card {
      background: #242b2d;
      color: #fff
    }
    :where(html[data-page=home]) .tile.point-card {
      background: #f2efe9;
      color: #252824
    }
    :where(html[data-page=home]) .tile.signal {
      background: var(--signal);
      color: var(--ink)
    }
    :where(html[data-page=home]) .tile p {
      font-size: 15px;
      line-height: 1.45
    }
    :where(html[data-page=home]) .tile-photo img {
      filter: saturate(.65) contrast(.98)
    }
    :where(html[data-page=home]) .tile-note {
      font-size: 14px;
      white-space: nowrap;
      opacity: .86
    }
    :where(html[data-page=home]) .trust-visual {
      border-radius: 12px
    }
    :where(html[data-page=home]) .ai-foot small,
:where(html[data-page=home]) .trust-foot span {
      white-space: nowrap
    }
    :where(html[data-page=home]) .bridge-line,
:where(html[data-page=home]) .trust-foot span {
      font-size: 13px
    }
    :where(html[data-page=home]) .tile.charcoal.ai-card {
      background: #232a2c
    }
    :where(html[data-page=home]) .tile {
      border-radius: 18px
    }
    :where(html[data-page=home]) .tile .num {
      font-size: 10px;
      letter-spacing: .17em
    }
    :where(html[data-page=home]) .stat-tile .stat {
      font-size: clamp(100px,9.2vw,150px)
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(1) {
      transition-delay: .03s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(2) {
      transition-delay: .1s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(3) {
      transition-delay: .17s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(4) {
      transition-delay: .24s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(5) {
      transition-delay: .31s
    }
    :where(html[data-page=home]) .tile-grid .tile:nth-child(6) {
      transition-delay: .38s
    }
    :where(html[data-page=home]) .ai-card .ai-foot,
:where(html[data-page=home]) .ai-card .ai-top,
:where(html[data-page=home]) .point-card .point-copy,
:where(html[data-page=home]) .point-card h3 {
      z-index: 2
    }
    :where(html[data-page=home]) .point-card .point-path path {
      fill: none;
      stroke: #8e918b;
      stroke-width: .75;
      stroke-dasharray: 2.2 3.2;
      vector-effect: non-scaling-stroke
    }
    :where(html[data-page=home]) .point-card .point-path circle {
      fill: #f2db38;
      stroke: #3c3f3a;
      stroke-width: .35;
      vector-effect: non-scaling-stroke
    }
    :where(html[data-page=home]) .ai-card {
      isolation: isolate
    }
    :where(html[data-page=home]) .ai-card::before {
      content: "";
      z-index: 0;
      background-image: var(--ai-bg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: .94;
      transform: none
    }
    :where(html[data-page=home]) .ai-card::after {
      content: "";
      z-index: 1;
      background: linear-gradient(180deg,rgba(22,29,31,.6)0,rgba(22,29,31,.06) 34%,rgba(22,29,31,.06) 62%,rgba(22,29,31,.72) 100%),linear-gradient(90deg,rgba(22,29,31,.34)0,rgba(22,29,31,0) 55%);
      pointer-events: none
    }
    :where(html[data-page=home]) .ai-card .ai-foot small,
:where(html[data-page=home]) .ai-foot small {
      text-transform: uppercase
    }
    :where(html[data-page=home]) .ai-hud {
      z-index: 0
    }
    :where(html[data-page=home]) .ai-foot,
:where(html[data-page=home]) .ai-top {
      z-index: 2
    }
    :where(html[data-page=home]) .hud-label {
      z-index: 1;
      text-transform: uppercase;
      white-space: nowrap
    }
    :where(html[data-page=home]) .hud-label.coords {
      text-align: right
    }
    :where(html[data-page=home]) .hard .tile-grid {
      display: grid;
      grid-template-columns: minmax(0,1fr);
      grid-auto-rows: auto;
      align-items: stretch;
      gap: 16px
    }
    :where(html[data-page=home]) .hard .tile-grid>.tile {
      height: clamp(420px,80vw,560px)
    }
    :where(html[data-page=home]) .hard .tile {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 18px;
      width: 100%;
      min-width: 0;
      min-height: 0;
      box-sizing: border-box;
      border-radius: 18px;
      overflow: hidden;
      padding: 22px
    }
    :where(html[data-page=home]) .hard .tile-grid>.tile>* {
      min-width: 0
    }
    :where(html[data-page=home]) .hard .tile h3,
:where(html[data-page=home]) .hard .tile p {
      margin: 0
    }
    :where(html[data-page=home]) .hard .tile h3 {
      line-height: .96
    }
    :where(html[data-page=home]) .hard .tile .num {
      min-height: 0;
      margin: 0 0 14px
    }
    :where(html[data-page=home]) .hard .photo-card {
      display: flex;
      padding: 0;
      gap: 0
    }
    :where(html[data-page=home]) .hard .photo-card .tile-photo {
      display: block;
      width: 100%;
      height: 55%;
      min-width: 0;
      min-height: 0;
      flex: none;
      overflow: hidden;
      margin: 0
    }
    :where(html[data-page=home]) .hard .photo-card .tile-photo img {
      display: block;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body.compact {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      flex: 1;
      padding: 20px 22px 22px
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body h3 {
      max-width: 10ch
    }
    :where(html[data-page=home]) .hard .photo-card .tile-note {
      white-space: normal;
      padding-bottom: 0
    }
    :where(html[data-page=home]) .hard .dark {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 22px
    }
    :where(html[data-page=home]) .hard .dark h3 {
      max-width: 15ch
    }
    :where(html[data-page=home]) .hard .trust-visual {
      display: block;
      height: auto;
      min-height: 0;
      max-height: 55%;
      margin: 0;
      overflow: hidden;
      flex: none;
      align-self: center;
      position: relative;
      width: 100%;
      max-width: none;
      aspect-ratio: 16/10
    }
    :where(html[data-page=home]) .hard .trust-visual img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: top center;
      position: absolute;
      top: 0;
      left: 0;
      display: block
    }
    :where(html[data-page=home]) .hard .trust-foot {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: end;
      gap: 12px;
      margin: 0
    }
    :where(html[data-page=home]) .hard .trust-foot p {
      max-width: 26ch
    }
    :where(html[data-page=home]) .hard .trust-foot span {
      white-space: normal
    }
    :where(html[data-page=home]) .hard .stat-tile>div {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0
    }
    :where(html[data-page=home]) .hard .stat-tile .stat-wrap {
      display: block;
      margin: 0
    }
    :where(html[data-page=home]) .hard .stat-tile .stat {
      margin: 24px 0;
      line-height: .82
    }
    :where(html[data-page=home]) .hard .stat-tile .stat-head {
      margin: 0;
      max-width: 12ch
    }
    :where(html[data-page=home]) .hard .ai-card {
      position: relative;
      display: block;
      padding: 0;
      isolation: isolate
    }
    :where(html[data-page=home]) .hard .ai-card::after,
:where(html[data-page=home]) .hard .ai-card::before {
      position: absolute;
      inset: 0
    }
    :where(html[data-page=home]) .hard .ai-card .ai-top {
      position: absolute;
      top: 18px;
      left: 18px;
      right: 18px;
      bottom: auto;
      padding: 0;
      z-index: 3;
      min-height: 0
    }
    :where(html[data-page=home]) .hard .ai-card .ai-top .num {
      margin: 0 0 14px
    }
    :where(html[data-page=home]) .hard .ai-card .query {
      margin: 0;
      max-width: 10ch
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud {
      position: absolute;
      inset: auto;
      top: 50%;
      left: 50%;
      width: min(100%,clamp(420px,80vw,560px));
      height: auto;
      aspect-ratio: 1/1;
      transform: translate(-50%,-50%);
      min-height: 0;
      max-height: none;
      overflow: visible;
      z-index: 1
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud svg {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1/1;
      max-width: none;
      max-height: none
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot {
      position: absolute;
      top: auto;
      left: 18px;
      right: 18px;
      bottom: 18px;
      display: block;
      padding: 0;
      margin: 0;
      z-index: 3
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot h3 {
      margin: 0;
      max-width: 8ch
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot small {
      display: block;
      margin: 10px 0 0;
      padding: 0;
      white-space: nowrap
    }
    :where(html[data-page=home]) .hard .hud-label {
      position: absolute
    }
    :where(html[data-page=home]) .hard .hud-label.coords {
      top: 7%;
      right: 6%;
      text-align: right
    }
    :where(html[data-page=home]) .hard .hud-label.ai {
      top: 31%;
      right: 7%
    }
    :where(html[data-page=home]) .hard .hud-label.geo {
      top: 40%;
      left: 7%;
      right: auto
    }
    :where(html[data-page=home]) .hard .hud-label.seo {
      top: 61%;
      right: 9%
    }
    :where(html[data-page=home]) .hard .point-card {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 18px
    }
    :where(html[data-page=home]) .hard .point-card .num {
      position: static;
      inset: auto;
      min-height: 0;
      margin: 0 0 4px
    }
    :where(html[data-page=home]) .hard .point-card .point-copy {
      position: static;
      inset: auto;
      width: auto;
      max-width: 24ch;
      margin: 0;
      padding: 0;
      flex: none;
      text-align: left
    }
    :where(html[data-page=home]) .hard .point-card .point-path {
      position: static;
      inset: auto;
      width: 100%;
      height: clamp(52px,16vw,70px);
      min-height: 0;
      max-height: none;
      flex: none;
      margin: 0;
      overflow: visible
    }
    :where(html[data-page=home]) .hard .point-card h3 {
      position: static;
      inset: auto;
      width: auto;
      max-width: 11ch;
      margin: auto 0 0 auto;
      align-self: flex-end;
      text-align: right
    }
    :where(html[data-page=home]) .hard .bridge-tile,
:where(html[data-page=home]) .hard .signal {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px
    }
    :where(html[data-page=home]) .hard .bridge-tile h3,
:where(html[data-page=home]) .hard .signal h3 {
      margin: 0;
      max-width: 10ch
    }
    :where(html[data-page=home]) .hard .bridge-line {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: auto
    }
    @media (min-width:431px) {
      :where(html[data-page=home]) .hard .tile-grid {
        gap: 18px
      }
      :where(html[data-page=home]) .hard .ai-card .ai-top {
        top: 22px;
        left: 22px;
        right: 22px
      }
      :where(html[data-page=home]) .hard .ai-card .ai-foot {
        left: 22px;
        right: 22px;
        bottom: 22px
      }
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .hard .tile-grid>.tile {
      min-width: 0;
      min-height: 0;
      align-self: stretch
    }
    :where(html[data-page=home]) .hard .tile {
      --pad-x: clamp(18px,1.8vw,26px)
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body.compact {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px
    }
    :where(html[data-page=home]) .hard .photo-card .tile-photo {
      height: 62%
    }
    :where(html[data-page=home]) .hard .trust-visual {
      max-height: 100%;
      align-self: center;
      width: 100%;
      max-width: none;
      aspect-ratio: auto
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud {
      transform: translate(-50%,-50%);
      z-index: 1
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud svg {
      display: block;
      width: 100%;
      height: 100%;
      aspect-ratio: 1/1
    }
    :where(html[data-page=home]) .hard .stat-tile {
      container-type: inline-size
    }
    :where(html[data-page=home]) .hard .bridge-line {
      font-size: 12px
    }
  }
}
@layer components {
  @media (prefers-reduced-motion:reduce) {
    :where(html[data-page=home]) * {
      scroll-behavior: auto;
      transition: none
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .point-card {
      color: #252824
    }
    :where(html[data-page=home]) .point-card .point-copy {
      padding: 0
    }
  }
  @media (prefers-reduced-motion:reduce) {
    :where(html[data-page=home]) .tile-grid .tile.reveal {
      opacity: 1;
      transform: none;
      transition: none
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-card .ai-foot {
      justify-content: space-between
    }
    :where(html[data-page=home]) .ai-card .ai-foot small {
      padding-bottom: 4px
    }
    :where(html[data-page=home]) .point-card {
      position: relative;
      display: block;
      background: #fff
    }
    :where(html[data-page=home]) .point-card .num {
      position: absolute;
      left: 30px;
      top: 28px;
      min-height: auto
    }
    :where(html[data-page=home]) .point-card .point-copy {
      position: absolute;
      color: #696b65
    }
    :where(html[data-page=home]) .point-card .point-path {
      position: absolute;
      left: 31%;
      top: 35%;
      width: 48%;
      height: 42%;
      overflow: visible;
      opacity: .34;
      pointer-events: none
    }
    :where(html[data-page=home]) .point-card h3 {
      position: absolute;
      right: 30px;
      left: auto;
      top: auto;
      width: auto;
      max-width: 8.1ch;
      font-size: clamp(32px,2.65vw,46px);
      line-height: .94;
      text-align: right;
      margin: 0
    }
    :where(html[data-page=home]) .point-card .point-copy {
      left: 30px;
      right: auto;
      top: 84px;
      width: 64%;
      text-align: left
    }
    :where(html[data-page=home]) .ai-card>div:first-child {
      min-height: 0
    }
  }
  :where(html[data-page=home]) .hero .audit-link,
:where(html[data-page=home]) .hero-side .audit-link {
    color: var(--signal);
    border-bottom-color: var(--signal)
  }
  :where(html[data-page=home]) .hero .audit-link:hover,
:where(html[data-page=home]) .hero-side .audit-link:hover {
    color: var(--signal)
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-card>div:first-child {
      align-self: start
    }
    :where(html[data-page=home]) .ai-card .ai-foot {
      align-self: end;
      min-height: 0
    }
    :where(html[data-page=home]) .hard .tile {
      box-sizing: border-box
    }
    :where(html[data-page=home]) .hard .tile .num {
      margin: 0 0 14px;
      font-size: 10px;
      line-height: 1;
      letter-spacing: .16em
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body {
      padding: 20px var(--pad-x) 22px
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body h3 {
      margin: 0;
      font-size: clamp(28px,2.1vw,37px);
      line-height: .96;
      letter-spacing: -.045em;
      max-width: 10ch
    }
    :where(html[data-page=home]) .hard .photo-card .tile-note {
      font-size: 12px
    }
    :where(html[data-page=home]) .hard .dark {
      padding: var(--pad-y) var(--pad-x) 22px;
      display: grid;
      grid-template-rows: auto minmax(0,1fr) auto;
      gap: 14px
    }
    :where(html[data-page=home]) .hard .dark h3 {
      margin: 0;
      font-size: clamp(28px,2.15vw,38px);
      line-height: .95;
      letter-spacing: -.05em;
      max-width: 15ch
    }
    :where(html[data-page=home]) .hard .trust-visual {
      margin: 8px 0 0
    }
    :where(html[data-page=home]) .hard .trust-foot {
      margin-top: 0;
      display: grid;
      align-items: end
    }
    :where(html[data-page=home]) .hard .trust-foot p {
      margin: 0;
      max-width: 26ch;
      font-size: 13px;
      line-height: 1.35
    }
    :where(html[data-page=home]) .hard .trust-foot span {
      font-size: 12px;
      white-space: nowrap
    }
    :where(html[data-page=home]) .hard .stat-tile,
:where(html[data-page=home]) .point-card {
      padding: var(--pad-y) var(--pad-x) 24px
    }
    :where(html[data-page=home]) .hard .stat-tile .stat {
      margin: 14px 0 28px;
      line-height: .82
    }
    :where(html[data-page=home]) .hard .stat-tile .stat-head {
      margin: 0;
      max-width: 14ch;
      font-size: clamp(28px,2.15vw,38px);
      line-height: .95;
      letter-spacing: -.045em
    }
    :where(html[data-page=home]) .ai-card .ai-foot small {
      white-space: nowrap;
      align-self: end;
      margin: 0 0 4px;
      padding: 0;
      color: rgba(255,255,255,.52);
      font-size: 9px;
      line-height: 1;
      letter-spacing: .16em
    }
    :where(html[data-page=home]) .point-card .point-copy {
      margin: 0;
      max-width: 40ch;
      font-size: 16px;
      line-height: 1.45
    }
    :where(html[data-page=home]) .bridge-tile {
      padding: var(--pad-y) var(--pad-x) 22px
    }
    :where(html[data-page=home]) .bridge-tile h3 {
      margin: 0;
      max-width: 11ch;
      font-size: clamp(38px,2.9vw,50px);
      line-height: .93;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .bridge-line {
      margin-top: auto
    }
    :where(html[data-page=home]) .hard .tile h3,
:where(html[data-page=home]) .hard .tile p {
      overflow-wrap: normal;
      word-break: normal;
      text-wrap: balance
    }
    :where(html[data-page=home]) .ai-card {
      grid-template-rows: auto 154px minmax(0,1fr);
      gap: 20px;
      padding-bottom: 30px
    }
    :where(html[data-page=home]) .ai-card .ai-foot {
      column-gap: 22px;
      position: absolute
    }
    :where(html[data-page=home]) .ai-card .ai-foot h3 {
      white-space: normal;
      margin: 0;
      max-width: 11ch;
      color: #fff;
      font-size: clamp(34px,2.45vw,43px);
      line-height: .93;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .ai-card .ai-top {
      position: absolute
    }
    :where(html[data-page=home]) .ai-card .num {
      margin: 0 0 18px;
      color: rgba(255,255,255,.62)
    }
    :where(html[data-page=home]) .ai-card .query {
      margin: 0;
      max-width: 18ch;
      color: rgba(255,255,255,.78);
      font-size: clamp(17px,1.2vw,20px);
      line-height: 1.28
    }
    :where(html[data-page=home]) .ai-card .ai-foot {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items: end;
      gap: 18px
    }
  }
  @media (max-width:900px) {
    :where(html[data-page=home]) .hard-head.reveal,
:where(html[data-page=home]) .journey-minimal.reveal,
:where(html[data-page=home]) .perspective-top.reveal,
:where(html[data-page=home]) .process-head.reveal,
:where(html[data-page=home]) .reveal,
:where(html[data-page=home]) .step.reveal {
      opacity: 1;
      transform: none;
      visibility: visible
    }
    :where(html[data-page=home]) .reveal {
      transition: none
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-card {
      position: relative;
      padding: 0;
      display: block
    }
    :where(html[data-page=home]) .ai-foot,
:where(html[data-page=home]) .ai-hud,
:where(html[data-page=home]) .ai-top {
      position: absolute
    }
    :where(html[data-page=home]) .ai-foot {
      grid-template-columns: minmax(0,1fr) auto
    }
    :where(html[data-page=home]) .ai-foot small {
      margin: 0 0 4px;
      line-height: 1
    }
  }
  @media (max-width:700px) {
    :where(html[data-page=home]) a,
:where(html[data-page=home]) button {
      -webkit-tap-highlight-color: transparent
    }
  }
  :where(html[data-page=home]) .audit-link::after,
:where(html[data-page=home]) .closer .cta::after,
:where(html[data-page=home]) .hero .audit-link::after,
:where(html[data-page=home]) .perspective-bottom a::after {
    content: "↗"
  }
  :where(html[data-page=home]) .audit-link,
:where(html[data-page=home]) .closer .cta,
:where(html[data-page=home]) .hero .audit-link,
:where(html[data-page=home]) .perspective-bottom a {
    text-decoration: none
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .ai-card {
      background: #1f282b;
      overflow: hidden
    }
    :where(html[data-page=home]) .ai-top {
      top: 20px;
      left: 20px;
      right: 20px
    }
    :where(html[data-page=home]) .ai-top .num {
      margin: 0 0 14px;
      color: rgba(255,255,255,.5);
      letter-spacing: .13em
    }
    :where(html[data-page=home]) .ai-top .query {
      margin: 0;
      max-width: 10ch;
      color: rgba(255,255,255,.8);
      font-size: clamp(18px,1.35vw,22px);
      line-height: 1.28
    }
    :where(html[data-page=home]) .ai-foot {
      left: 20px;
      right: 20px;
      display: block;
      bottom: 28px
    }
    :where(html[data-page=home]) .ai-foot h3 {
      margin: 0;
      max-width: 7ch;
      color: #fff;
      font-size: clamp(33px,2.45vw,42px);
      line-height: .94;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .ai-foot small {
      display: block;
      margin-top: 10px;
      color: rgba(255,255,255,.48);
      font-size: 9px;
      letter-spacing: .16em
    }
    :where(html[data-page=home]) .point-card h3 {
      bottom: 28px
    }
    :where(html[data-page=home]) .hud-label {
      font-size: 8px;
      letter-spacing: .13em;
      color: rgba(255,255,255,.64)
    }
    :where(html[data-page=home]) .hud-label.coords {
      top: 8%;
      right: 6%
    }
    :where(html[data-page=home]) .hud-label.ai {
      top: 31%;
      right: 8%
    }
    :where(html[data-page=home]) .hud-label.geo {
      top: 40%;
      left: 8%;
      right: auto
    }
    :where(html[data-page=home]) .hud-label.seo {
      top: 61%;
      right: 10%
    }
    :where(html[data-page=home]) .ai-hud svg circle[cx=67][cy=50][r="1.25"] {
      fill: #edd11f
    }
    :where(html[data-page=home]) .ai-hud svg circle[cx=67][cy=50][r="2.2"] {
      stroke: #edd11f
    }
    :where(html[data-page=home]) .hud-label.ai {
      color: rgba(255,255,255,.66)
    }
    :where(html[data-page=home]) .hud-label.geo {
      color: rgba(255,255,255,.64)
    }
    :where(html[data-page=home]) .hud-label.seo {
      color: rgba(255,255,255,.62)
    }
    :where(html[data-page=home]) .hud-label.coords {
      color: rgba(255,255,255,.72)
    }
  }
  @media (max-width:760px) {
    :where(html[data-page=home]) .point-card {
      color: #252824;
      background: #fff
    }
    :where(html[data-page=home]) .point-card .point-copy {
      color: #696b65
    }
    :where(html[data-page=home]) .point-card .point-path {
      opacity: .34;
      pointer-events: none
    }
    :where(html[data-page=home]) .point-card h3 {
      font-size: clamp(32px,2.65vw,46px);
      line-height: .94;
      text-align: right
    }
    :where(html[data-page=home]) .point-card .point-copy {
      text-align: left;
      font-size: 16px;
      line-height: 1.45
    }
    :where(html[data-page=home]) .hard .tile .num {
      font-size: 10px;
      line-height: 1;
      letter-spacing: .16em
    }
    :where(html[data-page=home]) .hard .photo-card .tile-body h3 {
      font-size: clamp(28px,2.1vw,37px);
      line-height: .96;
      letter-spacing: -.045em
    }
    :where(html[data-page=home]) .hard .photo-card .tile-note,
:where(html[data-page=home]) .hard .trust-foot span {
      font-size: 12px
    }
    :where(html[data-page=home]) .hard .dark h3 {
      font-size: clamp(28px,2.15vw,38px);
      line-height: .95;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .hard .trust-foot p {
      font-size: 13px;
      line-height: 1.35
    }
    :where(html[data-page=home]) .ai-card .ai-foot small,
:where(html[data-page=home]) .hard .trust-foot span {
      white-space: nowrap
    }
    :where(html[data-page=home]) .hard .stat-tile .stat-head {
      letter-spacing: -.045em
    }
    :where(html[data-page=home]) .bridge-tile h3 {
      font-size: clamp(38px,2.9vw,50px);
      line-height: .93;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .ai-card .ai-foot h3 {
      white-space: normal;
      color: #fff;
      font-size: clamp(34px,2.45vw,43px);
      line-height: .93;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .ai-card .num {
      color: rgba(255,255,255,.62)
    }
    :where(html[data-page=home]) .ai-card .query {
      color: rgba(255,255,255,.78);
      font-size: clamp(17px,1.2vw,20px);
      line-height: 1.28
    }
    :where(html[data-page=home]) .ai-card .ai-foot small,
:where(html[data-page=home]) .ai-foot small {
      color: rgba(255,255,255,.52);
      font-size: 9px;
      line-height: 1;
      letter-spacing: .16em
    }
    :where(html[data-page=home]) .ai-foot small {
      color: rgba(255,255,255,.48)
    }
    :where(html[data-page=home]) .ai-card {
      background: #1f282b
    }
    :where(html[data-page=home]) .ai-top .num {
      color: rgba(255,255,255,.5);
      letter-spacing: .13em
    }
    :where(html[data-page=home]) .ai-top .query {
      color: rgba(255,255,255,.8);
      font-size: clamp(18px,1.35vw,22px);
      line-height: 1.28
    }
    :where(html[data-page=home]) .ai-foot h3 {
      color: #fff;
      font-size: clamp(33px,2.45vw,42px);
      line-height: .94;
      letter-spacing: -.05em
    }
    :where(html[data-page=home]) .hud-label {
      letter-spacing: .13em;
      font-size: 6.5px;
      color: rgba(255,255,255,.64)
    }
    :where(html[data-page=home]) .ai-hud svg circle[cx=67][cy=50][r="1.25"] {
      fill: #edd11f
    }
    :where(html[data-page=home]) .ai-hud svg circle[cx=67][cy=50][r="2.2"] {
      stroke: #edd11f
    }
    :where(html[data-page=home]) .hud-label.ai {
      color: rgba(255,255,255,.66)
    }
    :where(html[data-page=home]) .hud-label.geo {
      color: rgba(255,255,255,.64)
    }
    :where(html[data-page=home]) .hud-label.seo {
      color: rgba(255,255,255,.62)
    }
    :where(html[data-page=home]) .hud-label.coords {
      color: rgba(255,255,255,.72)
    }
    :where(html[data-page=home]) .hard .tile-grid>.tile {
      border-radius: 18px
    }
    :where(html[data-page=home]) .hard .stat-tile .stat {
      font-size: clamp(88px,25vw,118px);
      line-height: .82
    }
    :where(html[data-page=home]) .hard .stat-tile .stat-head {
      font-size: 32px;
      line-height: .96
    }
    :where(html[data-page=home]) .hard .point-card .point-copy {
      font-size: 17px;
      line-height: 1.45
    }
    :where(html[data-page=home]) .hard .point-card .point-path {
      opacity: .3
    }
    :where(html[data-page=home]) .hard .point-card h3 {
      line-height: .92;
      text-align: right
    }
    :where(html[data-page=home]) .hard .bridge-tile h3,
:where(html[data-page=home]) .hard .signal h3 {
      line-height: .94
    }
    :where(html[data-page=home]) .hard .tile h3,
:where(html[data-page=home]) .hard .tile p {
      word-break: normal;
      text-wrap: balance
    }
    :where(html[data-page=home]) .hard .bridge-tile h3,
:where(html[data-page=home]) .hard .point-card h3,
:where(html[data-page=home]) .hard .signal h3 {
      font-size: 30px
    }
    :where(html[data-page=home]) .hard .ai-card .ai-top {
      z-index: 3
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud {
      z-index: 1
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot {
      z-index: 3
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot h3 {
      line-height: .94;
      font-size: 28px
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot small {
      font-size: 9px;
      white-space: nowrap
    }
    @media (min-width:431px) {
      :where(html[data-page=home]) .hard .ai-card .ai-foot h3 {
        font-size: clamp(28px,7.7vw,34px)
      }
      :where(html[data-page=home]) .hard .bridge-tile h3,
:where(html[data-page=home]) .hard .point-card h3,
:where(html[data-page=home]) .hard .signal h3 {
        font-size: 32px
      }
    }
  }
  @media (min-width:761px) {
    :where(html[data-page=home]) .hard .trust-visual {
      height: calc(100% - 8px)
    }
    :where(html[data-page=home]) .hard .trust-foot {
      grid-template-columns: minmax(0,1fr);
      gap: 8px
    }
    :where(html[data-page=home]) .hard .ai-card .ai-hud {
      position: absolute;
      inset: auto;
      top: 50%;
      left: 50%;
      width: min(100%,clamp(380px,29vw,464px));
      height: auto;
      aspect-ratio: 1/1
    }
    :where(html[data-page=home]) .hard .ai-card .ai-top {
      top: 22px;
      left: var(--pad-x);
      right: var(--pad-x)
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot {
      left: var(--pad-x);
      right: var(--pad-x);
      bottom: 24px;
      display: block
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot h3 {
      font-size: clamp(28px,2.45vw,42px)
    }
    :where(html[data-page=home]) .hard .ai-card .ai-foot small {
      display: block;
      margin: 10px 0 0
    }
    :where(html[data-page=home]) .hard .point-card .point-copy {
      left: var(--pad-x);
      right: var(--pad-x);
      width: auto;
      font-size: clamp(14px,1.15vw,16px)
    }
    :where(html[data-page=home]) .hard .point-card h3 {
      right: var(--pad-x);
      font-size: clamp(28px,2.65vw,46px)
    }
    :where(html[data-page=home]) .hard .dark h3,
:where(html[data-page=home]) .hard .stat-tile .stat-head,
:where(html[data-page=home]) .hard .tile h3 {
      font-size: clamp(25px,2.15vw,38px)
    }
    :where(html[data-page=home]) .hard .bridge-tile h3 {
      font-size: clamp(32px,2.9vw,50px)
    }
    :where(html[data-page=home]) .hard .stat-tile .stat {
      font-size: clamp(70px,42cqw,138px)
    }
  }
  @media (min-width:901px) and (prefers-reduced-motion:no-preference) {
    :where(html[data-page=home].js.reveal-enabled) .reveal:not(.in) {
      opacity: 0;
      transform: translateY(22px)
    }
    :where(html[data-page=home].js.reveal-enabled) .tile-grid .tile.reveal:not(.in) {
      transform: translateY(18px)
    }
    :where(html[data-page=home].js.reveal-enabled) .reveal.in {
      opacity: 1;
      transform: none
    }
  }
html[data-page=home] .bf-two-services{background:#f2efe9;color:#252824;padding:clamp(42px,5vw,80px) 0;border-top:1px solid #ceccc3}
html[data-page=home] .bf-two-services .shell{width:min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));margin:auto}
html[data-page=home] .bf-two-services__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:clamp(26px,3vw,45px)}
html[data-page=home] .bf-two-services__top .kicker{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
html[data-page=home] .bf-two-services__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,5vw,80px)}
html[data-page=home] .bf-two-services__item{display:block;color:inherit;text-decoration:none;padding:18px 0 24px;border-top:1px solid #77776e;border-bottom:1px solid #77776e}
html[data-page=home] .bf-two-services__item h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(27px,3.3vw,54px);font-weight:400;letter-spacing:-.07em;line-height:1.05;margin:0 0 15px}
html[data-page=home] .bf-two-services__item p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:clamp(15px,1.2vw,18px);line-height:1.5;max-width:480px;margin:0;color:#60615c}
html[data-page=home] .bf-two-services__bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:22px;font-size:12px}
@media(max-width:760px){html[data-page=home] .bf-two-services__grid{grid-template-columns:1fr;gap:22px}html[data-page=home] .bf-two-services__top{align-items:flex-start} }

}
@layer foundation {
  :root:where([data-page=work]) {
    --cream: #f1eee8;
    --paper: #f8f6f2;
    --ink: #272a27;
    --charcoal: #242a2a;
    --muted: #71736d;
    --yellow: #f1d92f
  }
  :where(html[data-page=work]) * {
    box-sizing: border-box
  }
  html:where([data-page=work]) {
    scroll-behavior: smooth
  }
  :where(html[data-page=work]) body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: Arial,Helvetica,sans-serif
  }
  :where(html[data-page=work]) a {
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=work]) .shell {
    margin: auto
  }
  :where(html[data-page=work]) .hero {
    padding: 86px 0 110px
  }
  :where(html[data-page=work]) .kicker {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted)
  }
  :where(html[data-page=work]) .hero-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 80px;
    align-items: end;
    margin-top: 36px
  }
  :where(html[data-page=work]) h1 {
    font-size: clamp(68px,10.5vw,154px);
    line-height: .82;
    letter-spacing: -.075em;
    margin: 0;
    font-weight: 500
  }
  :where(html[data-page=work]) .hero-copy {
    font-size: 18px;
    line-height: 1.5;
    max-width: 31ch;
    color: #5f625c;
    margin: 0 0 6px
  }
  :where(html[data-page=work]) .hero-copy strong {
    color: var(--ink);
    font-weight: 500
  }
  :where(html[data-page=work]) .case {
    background: var(--charcoal);
    color: #fff;
    padding: 110px 0 120px
  }
  :where(html[data-page=work]) .case-top {
    grid-template-columns: .75fr 1.25fr;
    gap: 80px
  }
  :where(html[data-page=work]) .case-index {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48)
  }
  :where(html[data-page=work]) .case-title h2 {
    font-size: clamp(50px,7.5vw,106px);
    line-height: .88;
    letter-spacing: -.06em;
    margin: 8px 0 24px;
    font-weight: 500
  }
  :where(html[data-page=work]) .case-title p {
    margin: 0;
    max-width: 40ch;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
    font-size: 17px
  }
  :where(html[data-page=work]) .case-title .place {
    display: block;
    margin-top: 13px;
    color: var(--yellow);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase
  }
  :where(html[data-page=work]) .metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: rgba(255,255,255,.13);
    margin-top: 72px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    overflow: hidden
  }
  :where(html[data-page=work]) .metric {
    background: var(--charcoal);
    padding: 32px 30px 30px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }
  :where(html[data-page=work]) .metric strong {
    font-size: clamp(56px,6vw,90px);
    letter-spacing: -.06em;
    font-weight: 500;
    line-height: .9
  }
  :where(html[data-page=work]) .metric span {
    font-size: 12px;
    color: rgba(255,255,255,.56);
    max-width: 18ch;
    line-height: 1.4
  }
  :where(html[data-page=work]) .story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 80px
  }
  :where(html[data-page=work]) .story-card {
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    min-height: 420px
  }
  :where(html[data-page=work]) .story-card.light {
    background: #f4f1eb;
    color: var(--ink);
    border-color: transparent
  }
  :where(html[data-page=work]) .story-card .num {
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.48)
  }
  :where(html[data-page=work]) .story-card.light .num {
    color: #7a7c76
  }
  :where(html[data-page=work]) .story-card h3 {
    font-size: clamp(38px,4.3vw,64px);
    line-height: .92;
    letter-spacing: -.05em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=work]) .story-card p {
    font-size: 15px;
    line-height: 1.55;
    max-width: 38ch;
    color: rgba(255,255,255,.64)
  }
  :where(html[data-page=work]) .story-card.light p {
    color: #656862
  }
  :where(html[data-page=work]) .quote {
    background: #7c5f4d;
    color: #fff;
    padding: 120px 0
  }
  :where(html[data-page=work]) .quote blockquote {
    font-size: clamp(42px,6vw,82px);
    line-height: .98;
    letter-spacing: -.052em;
    margin: 0;
    max-width: 18ch;
    font-weight: 400
  }
  :where(html[data-page=work]) .quote footer {
    margin-top: 32px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7)
  }
  :where(html[data-page=work]) .next {
    background: var(--yellow);
    padding: 105px 0 112px
  }
  :where(html[data-page=work]) .next-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 70px;
    align-items: end
  }
  :where(html[data-page=work]) .next h2 {
    font-size: clamp(54px,7.5vw,102px);
    letter-spacing: -.065em;
    line-height: .88;
    margin: 12px 0 0;
    font-weight: 500
  }
  :where(html[data-page=work]) .next-right {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start
  }
  :where(html[data-page=work]) .next-right p {
    margin: 0;
    max-width: 31ch;
    line-height: 1.5;
    font-size: 16px
  }
  :where(html[data-page=work]) .cta {
    border-bottom: 1px solid currentColor;
    padding-bottom: 5px;
    font-size: 13px
  }
  :where(html[data-page=work]) .cta:after {
    content: "↗";
    margin-left: .45em
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .shell {
      width: min(100% - 28px,1180px)
    }
    :where(html[data-page=work]) .hero {
      padding: 72px 0 78px
    }
    :where(html[data-page=work]) .case-top,:where(html[data-page=work]) .hero-grid,:where(html[data-page=work]) .next-grid {
      grid-template-columns: 1fr;
      gap: 34px
    }
    :where(html[data-page=work]) h1 {
      font-size: clamp(68px,20vw,100px)
    }
    :where(html[data-page=work]) .hero-copy {
      font-size: 17px;
      max-width: 27ch
    }
    :where(html[data-page=work]) .case {
      padding: 80px 0 88px
    }
    :where(html[data-page=work]) .case-title h2 {
      font-size: clamp(52px,15vw,76px)
    }
    :where(html[data-page=work]) .metrics {
      grid-template-columns: 1fr;
      margin-top: 50px
    }
    :where(html[data-page=work]) .story {
      grid-template-columns: 1fr;
      margin-top: 52px
    }
    :where(html[data-page=work]) .story-card {
      min-height: 350px
    }
    :where(html[data-page=work]) .story-card h3 {
      font-size: 45px
    }
    :where(html[data-page=work]) .quote {
      padding: 88px 0
    }
    :where(html[data-page=work]) .quote blockquote {
      font-size: clamp(40px,12vw,62px)
    }
    :where(html[data-page=work]) .next {
      padding: 82px 0
    }
    :where(html[data-page=work]) .next h2 {
      font-size: clamp(54px,14vw,76px)
    }
  }
  :where(html[data-page=work]) .finished-site {
    margin-top: 22px
  }
  :where(html[data-page=work]) .finished-site-frame {
    border-radius: 20px
  }
  :where(html[data-page=work]) .finished-site-caption {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 2px 0;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .finished-site-frame {
      min-height: 0
    }
    :where(html[data-page=work]) .metric strong {
      display: block
    }
  }
  :where(html[data-page=work]) .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    text-decoration: none
  }
  :where(html[data-page=work]) .audit-link::after {
    font-family: Arial,sans-serif;
    vertical-align: .02em;
    content: "↗";
    display: inline-block;
    margin-left: .35em;
    font-size: .9em;
    line-height: 1;
    transform: translateY(-.02em)
  }
  :where(html[data-page=work]) .site-header {
    padding: 20px 0;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=work]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=work]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=work]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=work]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=work]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=work]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=work]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=work]) .site-header nav .active,:where(html[data-page=work]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=work]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=work]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=work]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=work]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=work]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=work]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=work]) .site-header .inner {
      width: calc(100% - 36px)
    }
    :where(html[data-page=work]) .site-header nav {
      font-size: 9px;
      gap: clamp(6px,2vw,10px);
      letter-spacing: .04em
    }
  }
  :where(html[data-page=work]) .case-title {
    max-width: 980px
  }
}
@layer components {
  @media (max-width:820px) {
    :where(html[data-page=work]) .metric {
      min-height: 150px;
      padding: 28px 28px 26px
    }
    :where(html[data-page=work]) .metric strong {
      font-size: 72px;
      line-height: .82;
      margin: 0 0 18px
    }
    :where(html[data-page=work]) .metric span {
      font-size: 15px;
      line-height: 1.35;
      max-width: 15ch
    }
    :where(html[data-page=work]) .metric:nth-child(3) strong {
      font-size: 64px;
      line-height: .78;
      margin-bottom: 22px
    }
    :where(html[data-page=work]) .finished-site-frame img {
      aspect-ratio: auto
    }
  }
  :where(html[data-page=work]) .story-card {
    grid-template-rows: auto auto 1fr auto;
    align-content: stretch;
    padding: 34px 32px 30px
  }
  :where(html[data-page=work]) .story-card .num {
    margin: 0;
    align-self: start
  }
  :where(html[data-page=work]) .story-card h3 {
    align-self: start;
    min-height: 3.15em
  }
  :where(html[data-page=work]) .story-card p {
    align-self: end
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .story-card {
      padding: 28px 24px 24px
    }
    :where(html[data-page=work]) .story-card h3 {
      margin-top: 30px;
      min-height: auto
    }
    :where(html[data-page=work]) .story-card p {
      align-self: start
    }
  }
  :where(html[data-page=work]) .metric.outcome strong {
    font-size: clamp(42px,4.4vw,68px);
    line-height: .92;
    letter-spacing: -.045em
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .metric.outcome strong {
      font-size: 48px;
      margin-bottom: 20px
    }
  }
  :where(html[data-page=work]) .story {
    margin-bottom: 0
  }
  :where(html[data-page=work]) .quote {
    margin-top: 0
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .story {
      margin-bottom: 0
    }
  }
  :where(html[data-page=work]) .story-card {
    display: flex;
    flex-direction: column
  }
  :where(html[data-page=work]) .story-card h3 {
    margin: 34px 0
  }
  :where(html[data-page=work]) .story-card p {
    margin: auto 0 0
  }
  :where(html[data-page=work]) .finished-site-frame img {
    max-width: 100%
  }
  @media (max-width:820px) {
    :where(html[data-page=work]) .story-card h3 {
      margin: 30px 0 28px
    }
    :where(html[data-page=work]) .story-card p {
      margin-top: 0
    }
    :where(html[data-page=work]) .finished-site-frame img {
      width: 100%;
      height: auto;
      object-fit: contain
    }
  }
  :where(html[data-page=work]) .finished-site-frame {
    background: #202625;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden
  }
  :where(html[data-page=work]) .finished-site-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center top;
    aspect-ratio: auto
  }
  :where(html[data-page=work]) .shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }
  :where(html[data-page=work]) .case-top {
    display: block
  }
  :where(html[data-page=work]) .case-index {
    margin: 0 0 26px
  }
  :where(html[data-page=work]) .case-title .place,:where(html[data-page=work]) .case-title h2,:where(html[data-page=work]) .case-title p {
    margin-left: 0
  }
  :where(html[data-page=work]) .hero {
    min-height: 610px;
    padding-top: 118px;
    padding-bottom: 88px;
    display: block
  }
  :where(html[data-page=work]) .hero>.shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }
  :where(html[data-page=work]) .hero .kicker,:where(html[data-page=work]) .hero [class*=kicker] {
    margin: 0 0 22px;
    color: #4f524c;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=work]) .hero h1 {
    margin: 0;
    line-height: .86
  }
  :where(html[data-page=work]) .hero p {
    margin-top: 0
  }
  @media (max-width:950px) {
    :where(html[data-page=work]) .hero {
      min-height: auto;
      padding-top: 72px;
      padding-bottom: 70px
    }
    :where(html[data-page=work]) .hero .kicker,:where(html[data-page=work]) .hero [class*=kicker] {
      margin-bottom: 18px
    }
  }
}
@layer foundation {
  :root:where([data-page=pricing]) {
    --paper: #fbfaf6}
  :where(html[data-page=pricing]) * {
    box-sizing: border-box
  }
  html:where([data-page=pricing]) {
    scroll-behavior: smooth
  }
  :where(html[data-page=pricing]) body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
  }
  :where(html[data-page=pricing]) a {
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=pricing]) .pricing-hero {
    padding: clamp(82px,8.5vw,128px)0 clamp(72px,8vw,110px)
  }
  :where(html[data-page=pricing]) .pricing-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 76px;
    align-items: end
  }
  :where(html[data-page=pricing]) .pricing-hero h1 {
    font-size: clamp(70px,9vw,144px);
    letter-spacing: -.074em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=pricing]) .pricing-hero-copy {
    justify-self: end;
    max-width: 500px;
    padding-bottom: 10px
  }
  :where(html[data-page=pricing]) .pricing-hero-copy p {
    margin: 0;
    font-size: clamp(18px,1.6vw,24px);
    line-height: 1.42;
    color: #464943
  }
  :where(html[data-page=pricing]) .pricing-hero-copy small {
    display: block;
    margin-top: 22px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7a7c75
  }
  :where(html[data-page=pricing]) .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    padding-bottom: clamp(100px,11vw,170px)
  }
  :where(html[data-page=pricing]) .price-card {
    background: var(--paper);
    border-radius: 20px;
    padding: 28px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(37,40,36,.08)
  }
  :where(html[data-page=pricing]) .price-card.dark {
    background: var(--dark);
    color: #fff
  }
  :where(html[data-page=pricing]) .price-card.signal {
    background: var(--signal);
    color: var(--ink)
  }
  :where(html[data-page=pricing]) .price-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: start
  }
  :where(html[data-page=pricing]) .price-name {
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase
  }
  :where(html[data-page=pricing]) .price-type {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
    text-align: right
  }
  :where(html[data-page=pricing]) .price {
    font-size: clamp(68px,6.8vw,104px);
    line-height: .82;
    letter-spacing: -.075em;
    font-weight: 500
  }
  :where(html[data-page=pricing]) .price span {
    display: block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .02em;
    font-weight: 400
  }
  :where(html[data-page=pricing]) .price-copy {
    font-size: 16px;
    line-height: 1.48;
    max-width: 28ch;
    color: var(--muted)
  }
  :where(html[data-page=pricing]) .dark .price-copy {
    color: rgba(255,255,255,.65)
  }
  :where(html[data-page=pricing]) .signal .price-copy {
    color: rgba(37,40,36,.7)
  }
  :where(html[data-page=pricing]) .price-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(37,40,36,.14)
  }
  :where(html[data-page=pricing]) .dark .price-bottom {
    border-top-color: rgba(255,255,255,.2)
  }
  :where(html[data-page=pricing]) .price-bottom strong {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 10px
  }
  :where(html[data-page=pricing]) .price-bottom small {
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted)
  }
  :where(html[data-page=pricing]) .dark .price-bottom small {
    color: rgba(255,255,255,.52)
  }
  :where(html[data-page=pricing]) .signal .price-bottom small {
    color: rgba(37,40,36,.62)
  }
  :where(html[data-page=pricing]) .included {
    background: var(--dark);
    color: #fff;
    padding: clamp(88px,9vw,132px)0
  }
  :where(html[data-page=pricing]) .included-head {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 70px;
    align-items: start
  }
  :where(html[data-page=pricing]) .included h2 {
    margin: 16px 0 0;
    font-size: clamp(50px,6vw,90px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=pricing]) .include-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,.2)
  }
  :where(html[data-page=pricing]) .include-item {
    padding: 20px 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    font-size: 15px
  }
  :where(html[data-page=pricing]) .include-item:nth-child(odd) {
    padding-right: 30px
  }
  :where(html[data-page=pricing]) .include-item:nth-child(even) {
    padding-left: 30px;
    border-left: 1px solid rgba(255,255,255,.2)
  }
  :where(html[data-page=pricing]) .include-item span {
    display: block;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 8px
  }
  :where(html[data-page=pricing]) .ownership {
    padding: clamp(96px,10vw,150px)0
  }
  :where(html[data-page=pricing]) .ownership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end
  }
  :where(html[data-page=pricing]) .ownership h2 {
    margin: 16px 0 0;
    font-size: clamp(52px,6.5vw,96px);
    line-height: .9;
    letter-spacing: -.062em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=pricing]) .ownership-copy {
    max-width: 520px;
    justify-self: end
  }
  :where(html[data-page=pricing]) .ownership-copy p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    color: #4d504a
  }
  :where(html[data-page=pricing]) .ownership-copy p+p {
    margin-top: 22px;
    color: var(--muted);
    font-size: 15px
  }
  :where(html[data-page=pricing]) .pricing-cta {
    background: var(--signal);
    padding: clamp(94px,10vw,150px)0
  }
  :where(html[data-page=pricing]) .pricing-cta h2 {
    margin: 0;
    font-size: clamp(60px,8.5vw,134px);
    line-height: .84;
    letter-spacing: -.076em;
    font-weight: 500;
    max-width: 9ch
  }
  :where(html[data-page=pricing]) .cta-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-top: 58px;
    padding-top: 18px;
    border-top: 1px solid rgba(37,40,36,.2)
  }
  :where(html[data-page=pricing]) .cta-row p {
    margin: 0;
    max-width: 430px;
    font-size: 17px;
    line-height: 1.45
  }
  :where(html[data-page=pricing]) .cta {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 6px
  }
  :where(html[data-page=pricing]) .cta::after {
    content: "↗";
    margin-left: .35em
  }
  @media (max-width:950px) {
    :where(html[data-page=pricing]) .included-head,
:where(html[data-page=pricing]) .ownership-grid,
:where(html[data-page=pricing]) .pricing-hero-grid {
      grid-template-columns: 1fr;
      gap: 38px
    }
    :where(html[data-page=pricing]) .ownership-copy,
:where(html[data-page=pricing]) .pricing-hero-copy {
      justify-self: start
    }
    :where(html[data-page=pricing]) .pricing-grid {
      grid-template-columns: 1fr
    }
    :where(html[data-page=pricing]) .price-card {
      min-height: 420px
    }
  }
  @media (max-width:620px) {
    :root:where([data-page=pricing]) {
      --pad: 18px
    }
    :where(html[data-page=pricing]) .pricing-hero {
      padding-top: 60px
    }
    :where(html[data-page=pricing]) .pricing-hero h1 {
      font-size: 17vw
    }
    :where(html[data-page=pricing]) .include-list {
      grid-template-columns: 1fr
    }
    :where(html[data-page=pricing]) .include-item:nth-child(even),
:where(html[data-page=pricing]) .include-item:nth-child(odd) {
      padding-left: 0;
      padding-right: 0;
      border-left: 0
    }
    :where(html[data-page=pricing]) .cta-row {
      align-items: flex-start;
      flex-direction: column
    }
  }
  :where(html[data-page=pricing]) .site-header {
    padding: 20px 0;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=pricing]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=pricing]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=pricing]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=pricing]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=pricing]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=pricing]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=pricing]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=pricing]) .site-header nav .active,
:where(html[data-page=pricing]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=pricing]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=pricing]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=pricing]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=pricing]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=pricing]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=pricing]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=pricing]) .site-header .inner {
      width: calc(100% - 36px)
    }
    :where(html[data-page=pricing]) .site-header nav {
      font-size: 9px;
      gap: clamp(6px,2vw,10px);
      letter-spacing: .04em
    }
  }
  :where(html[data-page=pricing]) .pricing-note {
    grid-template-columns: 220px 1fr
  }
  :where(html[data-page=pricing]) .pricing-note strong {
    font-weight: 500;
    flex: 0 0 auto
  }
  :where(html[data-page=pricing]) .pricing-note span {
    color: var(--muted)
  }
  @media (max-width:620px) {
    :where(html[data-page=pricing]) .pricing-note {
      grid-template-columns: 1fr
    }
  }
  :where(html[data-page=pricing]) .pricing-note {
    white-space: nowrap
  }
  @media (max-width:950px) {
    :where(html[data-page=pricing]) .pricing-note {
      white-space: normal
    }
  }:root:where([data-page=pricing]) {
    --cream: #f2efe9;
    --ink: #252824;
    --dark: #222622;
    --signal: #f2db38;
    --line: #d9d4ca;
    --muted: #666962;
    --pad: clamp(20px,4.2vw,68px);
    --max: 1600px
  }:where(html[data-page=pricing]) .shell {
    width: min(var(--max),calc(100% - var(--pad)*2));
    margin: auto
  }:where(html[data-page=pricing]) .kicker {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }:where(html[data-page=pricing]) .route {
    background: var(--dark);
    color: #fff;
    padding: clamp(88px,9vw,132px)0
  }:where(html[data-page=pricing]) .route-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px
  }:where(html[data-page=pricing]) .route-top h2 {
    margin: 14px 0 0;
    font-size: clamp(48px,6.1vw,90px);
    line-height: .9;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 9ch
  }:where(html[data-page=pricing]) .route-top .kicker {
    color: rgba(255,255,255,.52)
  }:where(html[data-page=pricing]) .route-note {
    max-width: 330px;
    color: rgba(255,255,255,.55);
    font-size: 14px;
    line-height: 1.45
  }:where(html[data-page=pricing]) .route-line {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: 1px solid rgba(255,255,255,.2)
  }:where(html[data-page=pricing]) .route-card {
    position: relative;
    min-height: 390px;
    padding: 24px 24px 28px;
    border-left: 1px solid rgba(255,255,255,.18);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: background .35s ease,color .35s ease
  }:where(html[data-page=pricing]) .route-card:first-child {
    border-left: 0
  }:where(html[data-page=pricing]) .route-card::before {
    content: attr(data-step);
    position: absolute;
    right: -.02em;
    top: -.14em;
    font-size: clamp(118px,12vw,190px);
    line-height: 1;
    letter-spacing: -.085em;
    font-weight: 500;
    color: rgba(255,255,255,.055);
    pointer-events: none;
    transition: color .35s ease,transform .5s ease
  }:where(html[data-page=pricing]) .route-card:hover {
    background: var(--signal);
    color: var(--ink)
  }:where(html[data-page=pricing]) .route-card:hover::before {
    color: rgba(37,40,36,.09);
    transform: translateX(-6px)
  }:where(html[data-page=pricing]) .route-card .n {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal);
    position: relative;
    z-index: 2
  }:where(html[data-page=pricing]) .route-card:hover .n {
    color: var(--ink)
  }:where(html[data-page=pricing]) .route-card .bottom {
    position: relative;
    z-index: 2
  }:where(html[data-page=pricing]) .route-card h3 {
    margin: 0 0 18px;
    font-size: clamp(31px,3vw,48px);
    line-height: .94;
    letter-spacing: -.05em;
    font-weight: 500;
    max-width: 8ch
  }:where(html[data-page=pricing]) .route-card p {
    margin: 0;
    max-width: 26ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.62)
  }:where(html[data-page=pricing]) .route-card:hover p {
    color: rgba(37,40,36,.74)
  }:where(html[data-page=pricing]) .route-card small {
    display: block;
    margin-top: 20px;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45)
  }:where(html[data-page=pricing]) .route-card:hover small {
    color: rgba(37,40,36,.62)
  }:where(html[data-page=pricing]) .practical {
    padding: clamp(94px,10vw,150px)0
  }:where(html[data-page=pricing]) .practical-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 80px;
    align-items: start
  }:where(html[data-page=pricing]) .practical h2 {
    margin: 16px 0 0;
    font-size: clamp(48px,6vw,88px);
    line-height: .92;
    letter-spacing: -.058em;
    font-weight: 500;
    max-width: 8ch
  }:where(html[data-page=pricing]) .facts {
    border-top: 1px solid var(--line)
  }:where(html[data-page=pricing]) .fact {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 30px;
    padding: 22px 0 26px;
    border-bottom: 1px solid var(--line)
  }:where(html[data-page=pricing]) .fact .label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #787b74;
    padding-top: 5px
  }:where(html[data-page=pricing]) .fact strong {
    display: block;
    font-size: clamp(24px,2.4vw,36px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 500
  }:where(html[data-page=pricing]) .fact p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.48;
    max-width: 52ch
  }@media  (max-width:950px) {:where(html[data-page=pricing]) .intro-grid,
:where(html[data-page=pricing]) .practical-grid {
      grid-template-columns: 1fr;
      gap: 38px
    }}@media  (max-width:950px) {:where(html[data-page=pricing]) .route-top {
      align-items: start;
      flex-direction: column
    }}@media  (max-width:950px) {:where(html[data-page=pricing]) .route-line {
      grid-template-columns: 1fr 1fr
    }}@media  (max-width:950px) {:where(html[data-page=pricing]) .route-card:nth-child(3) {
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,.18)
    }}@media  (max-width:950px) {:where(html[data-page=pricing]) .route-card:nth-child(4) {
      border-top: 1px solid rgba(255,255,255,.18)
    }}@media  (max-width:620px) {:root:where([data-page=pricing]) {
      --pad: 18px
    }}@media  (max-width:620px) {:where(html[data-page=pricing]) .route-line {
      grid-template-columns: 1fr
    }}@media  (max-width:620px) {:where(html[data-page=pricing]) .route-card {
      min-height: 310px;
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,.18)
    }}@media  (max-width:620px) {:where(html[data-page=pricing]) .route-card:first-child {
      border-top: 0
    }}@media  (max-width:620px) {:where(html[data-page=pricing]) .fact {
      grid-template-columns: 1fr;
      gap: 8px
    }}
}
@layer components {
  :where(html[data-page=pricing]) .price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0
  }
  :where(html[data-page=pricing]) .price .from-label {
    color: inherit;
    display: block;
    margin: 0 0 8px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: .48
  }
  :where(html[data-page=pricing]) .price span {
    margin-top: 12px
  }
  :where(html[data-page=pricing]) .pricing-note {
    width: min(var(--max),calc(100% - var(--pad)*2));
    margin: -110px auto clamp(90px,9vw,140px);
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-size: 13px;
    line-height: 1.45
  }
  :where(html[data-page=pricing]) .pricing-note span {
    max-width: none
  }
  @media (max-width:950px) {
    :where(html[data-page=pricing]) .pricing-note {
      margin-top: -70px;
      align-items: flex-start
    }
  }
  @media (max-width:620px) {
    :where(html[data-page=pricing]) .pricing-note {
      margin-top: -60px;
      flex-direction: column;
      gap: 6px
    }
  }
  :where(html[data-page=pricing]) .pricing-grid {
    align-items: stretch
  }
  :where(html[data-page=pricing]) .price-card {
    min-height: 520px;
    display: grid;
    grid-template-rows: 1fr auto
  }
  :where(html[data-page=pricing]) .price-card>div:first-child {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-height: 0
  }
  :where(html[data-page=pricing]) .price-top {
    align-self: start
  }
  :where(html[data-page=pricing]) .price {
    margin: 44px 0 28px;
    align-self: start
  }
  :where(html[data-page=pricing]) .price-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
    font-size: clamp(68px,6.8vw,104px);
    line-height: .82;
    letter-spacing: -.075em;
    font-weight: 500
  }
  :where(html[data-page=pricing]) .price-line .period {
    display: inline;
    margin: 0;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 400;
    white-space: nowrap
  }
  :where(html[data-page=pricing]) .price-copy {
    align-self: start;
    margin: 0
  }
  :where(html[data-page=pricing]) .price-bottom {
    align-self: end
  }
  @media (max-width:950px) {
    :where(html[data-page=pricing]) .price-card>div:first-child {
      grid-template-rows: auto auto 1fr
    }
  }
  :where(html[data-page=pricing]) .pricing-hero {
    min-height: 610px;
    padding-top: 118px;
    padding-bottom: 88px;
    display: block
  }
  :where(html[data-page=pricing]) .pricing-hero>.shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }
  :where(html[data-page=pricing]) .pricing-hero .kicker,
:where(html[data-page=pricing]) .pricing-hero [class*=kicker] {
    margin: 0 0 22px;
    color: #4f524c;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=pricing]) .pricing-hero h1 {
    margin: 0;
    line-height: .86
  }
  :where(html[data-page=pricing]) .pricing-hero p {
    margin-top: 0
  }
  @media (max-width:950px) {
    :where(html[data-page=pricing]) .pricing-hero {
      min-height: auto;
      padding-top: 72px;
      padding-bottom: 70px
    }
    :where(html[data-page=pricing]) .pricing-hero .kicker,
:where(html[data-page=pricing]) .pricing-hero [class*=kicker] {
      margin-bottom: 18px
    }
  }:where(html[data-page=pricing]) .intro>.shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }:where(html[data-page=pricing]) .intro .kicker,
:where(html[data-page=pricing]) .intro [class*=kicker] {
    margin: 0 0 22px;
    color: #4f524c;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }@media  (max-width:950px) {:where(html[data-page=pricing]) .intro .kicker,
:where(html[data-page=pricing]) .intro [class*=kicker] {
      margin-bottom: 18px
    }}
.bf-service-support{background:#272824;color:#f6f4ee;padding:75px max(24px,4vw)}
.bf-service-support>.shell{max-width:1320px;margin:auto}
.bf-service-support h2{font-size:clamp(2.2rem,5vw,5rem);letter-spacing:-.05em;margin:.2em 0}
.bf-service-support p{font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.5;max-width:720px}
.bf-service-support .bf-service-note{font-size:.9rem;opacity:.65;margin-top:28px}
html[data-page=pricing] section.route{background:#222622;color:#f2efe9;padding:clamp(75px,8vw,130px) 0}html[data-page=pricing] .bf-pricing-label{padding-top:clamp(60px,7vw,110px);padding-bottom:16px}html[data-page=pricing] section.route h2{max-width:16ch}
}
html[data-page=pricing] section.practical{background:#f2efe9;color:#252824;padding:clamp(75px,8vw,130px) 0}
html[data-page=pricing] section.bf-service-support h2{max-width:18ch}
@media(max-width:700px){html[data-page=pricing] section.route,
html[data-page=pricing] section.practical{padding:72px 0}}

@layer components {
  [data-price-currency] { display: flex; align-items: baseline; gap: 12px; }
  .pricing-market { margin-top: 24px; }
  .pricing-market[hidden], [data-price-currency][hidden] { display: none; }
  .pricing-market__controls { display: flex; flex-wrap: wrap; gap: 8px; }
  .pricing-market__controls button { min-height: 48px; padding: 12px 20px; border: 1px solid #252824; border-radius: 4px; background: transparent; color: #252824; font: inherit; font-size: 15px; cursor: pointer; }
  .pricing-market__controls button[aria-pressed="true"] { background: #252824; color: #f2efe9; box-shadow: inset 0 -3px 0 #edd11f; }
  .pricing-market > p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
  .pricing-market .pricing-market__status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (max-width: 430px) { .pricing-market__controls button { flex: 1 1 130px; padding-inline: 12px; } }
}
@layer foundation {
  :root:where([data-page=about]) {
    --bg: #f2efe9;
    --ink: #242723;
    --muted: #6b6e68;
    --dark: #202625;
    --yellow: #f1d70d;
    --line: rgba(36,39,35,.16);
    --pad: clamp(22px,4.25vw,68px);
    --max: 1600px
  }
  :where(html[data-page=about]) * {
    box-sizing: border-box
  }
  :where(html[data-page=about]) body,html:where([data-page=about]) {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
  }
  :where(html[data-page=about]) a {
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=about]) .shell {
    width: min(var(--max),calc(100% - var(--pad)*2));
    margin: 0 auto
  }
  :where(html[data-page=about]) .kicker {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #777a73
  }
  :where(html[data-page=about]) .hero {
    padding: clamp(86px,8vw,126px)0 62px
  }
  :where(html[data-page=about]) .hero-grid {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 72px;
    align-items: end
  }
  :where(html[data-page=about]) .hero h1 {
    font-size: clamp(70px,9vw,146px);
    letter-spacing: -.07em;
    font-weight: 500;
    max-width: 7.2ch
  }
  :where(html[data-page=about]) .hero-copy {
    max-width: 540px;
    justify-self: end;
    padding-bottom: 10px
  }
  :where(html[data-page=about]) .hero-copy p:first-child {
    font-size: clamp(20px,1.8vw,28px);
    line-height: 1.32;
    letter-spacing: -.028em;
    color: #353833;
    margin: 0
  }
  :where(html[data-page=about]) .hero-copy p:last-child {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    margin: 26px 0 0
  }
  :where(html[data-page=about]) .journey {
    padding: 0 0 clamp(110px,11vw,170px)
  }
  :where(html[data-page=about]) .story {
    background: var(--dark);
    color: #fff;
    padding: clamp(84px,8vw,124px)0
  }
  :where(html[data-page=about]) .story-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 90px
  }
  :where(html[data-page=about]) .story h2 {
    font-size: clamp(50px,6vw,94px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 500;
    margin: 18px 0 0;
    max-width: 8ch
  }
  :where(html[data-page=about]) .story-copy {
    max-width: 760px;
    justify-self: end
  }
  :where(html[data-page=about]) .story-copy .lead {
    font-size: clamp(22px,2.15vw,34px);
    line-height: 1.32;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0
  }
  :where(html[data-page=about]) .story-copy p {
    font-size: 16px;
    line-height: 1.62;
    color: rgba(255,255,255,.64);
    margin: 28px 0 0
  }
  :where(html[data-page=about]) .story-copy p strong {
    color: #fff;
    font-weight: 500
  }
  :where(html[data-page=about]) .path {
    padding: clamp(80px,8vw,120px)0
  }
  :where(html[data-page=about]) .path-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 90px
  }
  :where(html[data-page=about]) .path h2 {
    font-size: clamp(46px,5.2vw,82px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 500;
    margin: 18px 0 0;
    max-width: 9ch
  }
  :where(html[data-page=about]) .timeline {
    border-top: 1px solid var(--line)
  }
  :where(html[data-page=about]) .timeline-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 36px;
    padding: 24px 0 28px;
    border-bottom: 1px solid var(--line)
  }
  :where(html[data-page=about]) .timeline-row .year {
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #777a73;
    padding-top: 5px
  }
  :where(html[data-page=about]) .timeline-row h3 {
    margin: 0;
    font-size: clamp(25px,2.6vw,40px);
    line-height: 1;
    letter-spacing: -.04em;
    font-weight: 500
  }
  :where(html[data-page=about]) .timeline-row p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 58ch
  }
  :where(html[data-page=about]) .close {
    background: var(--yellow);
    padding: clamp(82px,8vw,120px)0
  }
  :where(html[data-page=about]) .close h2 {
    font-size: clamp(54px,7.5vw,118px);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 500;
    margin: 0;
    max-width: 10ch
  }
  :where(html[data-page=about]) .close-meta {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: end;
    margin-top: 54px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase
  }
  :where(html[data-page=about]) .close-meta a {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  @media (max-width:900px) {
    :where(html[data-page=about]) .hero-grid,:where(html[data-page=about]) .path-grid,:where(html[data-page=about]) .story-grid {
      grid-template-columns: 1fr;
      gap: 40px
    }
    :where(html[data-page=about]) .hero-copy,:where(html[data-page=about]) .story-copy {
      justify-self: start
    }
  }
  @media (max-width:580px) {
    :where(html[data-page=about]) .hero h1 {
      font-size: clamp(62px,19vw,88px)
    }
    :where(html[data-page=about]) .timeline-row {
      grid-template-columns: 1fr;
      gap: 8px
    }
    :where(html[data-page=about]) .close-meta {
      flex-direction: column;
      align-items: flex-start
    }
  }
  :where(html[data-page=about]) .location-panel:hover img {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1) contrast(1)
  }
  :where(html[data-page=about]) .location-panel:focus img {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1) contrast(1)
  }
  :where(html[data-page=about]) .location-panel:hover::after {
    opacity: 1
  }
  :where(html[data-page=about]) .location-panel:focus::after {
    opacity: 1
  }
  :where(html[data-page=about]) .location-panel:hover .location-code {
    opacity: 0;
    transform: scale(.96)
  }
  :where(html[data-page=about]) .location-panel:focus .location-code {
    opacity: 0;
    transform: scale(.96)
  }
  :where(html[data-page=about]) .location-panel:hover .location-reveal {
    opacity: 1;
    transform: translateY(0)
  }
  :where(html[data-page=about]) .location-panel:focus .location-reveal {
    opacity: 1;
    transform: translateY(0)
  }
  :where(html[data-page=about]) .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    text-decoration: none
  }
  :where(html[data-page=about]) .audit-link::after {
    font-family: Arial,sans-serif;
    vertical-align: .02em;
    content: "↗";
    display: inline-block;
    margin-left: .35em;
    font-size: .9em;
    line-height: 1;
    transform: translateY(-.02em)
  }
  :where(html[data-page=about]) .site-header {
    padding: 20px 0;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=about]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=about]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=about]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=about]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=about]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=about]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=about]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=about]) .site-header nav .active,:where(html[data-page=about]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=about]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=about]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=about]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=about]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=about]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=about]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=about]) .site-header .inner {
      width: calc(100% - 36px)
    }
    :where(html[data-page=about]) .site-header nav {
      font-size: 9px;
      gap: clamp(6px,2vw,10px);
      letter-spacing: .04em
    }
  }
  :where(html[data-page=about]) .location-feature {
    padding: 0 0 clamp(110px,11vw,170px)
  }
  :where(html[data-page=about]) .location-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    height: clamp(520px,50vw,760px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden
  }
  :where(html[data-page=about]) .location-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    background: var(--bg);
    border-left: 1px solid var(--line);
    cursor: pointer;
    outline: 0;
    isolation: isolate
  }
  :where(html[data-page=about]) .location-panel:first-child {
    border-left: 0
  }
  :where(html[data-page=about]) .location-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    filter: grayscale(.15) contrast(.92) brightness(.82);
    transition: opacity .42s ease,transform .8s cubic-bezier(.2,.75,.2,1),filter .45s ease
  }
  :where(html[data-page=about]) .location-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #f2db38;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none
  }
  :where(html[data-page=about]) .location-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,rgba(28,30,27,.03) 20%,rgba(28,30,27,.12) 58%,rgba(28,30,27,.72) 100%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none
  }
  :where(html[data-page=about]) .location-code {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(88px,9.7vw,168px);
    line-height: .75;
    letter-spacing: -.085em;
    font-weight: 500;
    color: var(--ink);
    transition: opacity .28s ease,transform .45s ease,color .3s ease
  }
  :where(html[data-page=about]) .location-code.sco {
    font-size: clamp(66px,7.1vw,122px)
  }
  :where(html[data-page=about]) .location-shadow {
    position: absolute;
    pointer-events: none;
    transition: opacity .35s ease,transform .55s cubic-bezier(.2,.75,.2,1)
  }
  :where(html[data-page=about]) .location-reveal {
    position: absolute;
    z-index: 4;
    left: 26px;
    right: 26px;
    bottom: 28px;
    color: #fff;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease .08s,transform .45s ease .08s
  }
  :where(html[data-page=about]) .location-reveal small {
    display: block;
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78)
  }
  :where(html[data-page=about]) .location-reveal strong {
    display: block;
    max-width: 10ch;
    font-size: clamp(24px,2.45vw,42px);
    line-height: .96;
    letter-spacing: -.045em;
    font-weight: 500;
    text-shadow: 0 2px 22px rgba(0,0,0,.22)
  }
  :where(html[data-page=about]) .location-panel:focus-visible img,:where(html[data-page=about]) .location-panel:hover img {
    opacity: 1;
    transform: scale(1);
    filter: grayscale(.08) contrast(.98) brightness(.88)
  }
  :where(html[data-page=about]) .location-panel:focus-visible .location-tint,:where(html[data-page=about]) .location-panel:hover .location-tint {
    opacity: .66
  }
  :where(html[data-page=about]) .location-panel:focus-visible::after,:where(html[data-page=about]) .location-panel:hover::after {
    opacity: 1
  }
  :where(html[data-page=about]) .location-panel:focus-visible .location-code,:where(html[data-page=about]) .location-panel:hover .location-code {
    opacity: 0;
    transform: scale(.94)
  }
  :where(html[data-page=about]) .location-panel:focus-visible .location-reveal,:where(html[data-page=about]) .location-panel:hover .location-reveal {
    opacity: 1;
    transform: translateY(0)
  }
  :where(html[data-page=about]) .journey-note {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777a73
  }
  @media (hover:none),(max-width:900px) {
    :where(html[data-page=about]) .location-grid {
      grid-template-columns: 1fr 1fr;
      height: auto;
      gap: 10px;
      border: 0;
      overflow: visible
    }
    :where(html[data-page=about]) .location-panel {
      height: 58vw;
      min-height: 300px;
      border: 0;
      border-radius: 18px
    }
    :where(html[data-page=about]) .location-panel .location-tint {
      opacity: .5
    }
    :where(html[data-page=about]) .location-panel::after {
      opacity: 1
    }
    :where(html[data-page=about]) .location-code {
      display: none
    }
    :where(html[data-page=about]) .location-panel img,:where(html[data-page=about]) .location-reveal {
      opacity: 1;
      transform: none
    }
  }
  @media (max-width:580px) {
    :where(html[data-page=about]) .location-grid {
      grid-template-columns: 1fr
    }
    :where(html[data-page=about]) .location-panel {
      height: 105vw;
      min-height: 390px
    }
    :where(html[data-page=about]) .journey-note {
      flex-direction: column
    }
  }
  :where(html[data-page=about]) .location-shadow {
    mix-blend-mode: multiply
  }
}
@layer components {
  @media (prefers-reduced-motion:reduce) {
    :where(html[data-page=about]) .location-panel * {
      transition: none
    }
  }
  :where(html[data-page=about]) .location-code,:where(html[data-page=about]) .location-code.sco {
    font-size: clamp(88px,9.7vw,168px)
  }
  :where(html[data-page=about]) .location-shadow {
    z-index: 3;
    opacity: 0;
    text-shadow: 0 2px 0 rgba(255,255,255,.08),0 16px 38px rgba(0,0,0,.2)
  }
  @media (hover:none),(max-width:900px) {
    :where(html[data-page=about]) .location-shadow {
      opacity: .78;
      color: rgba(24,26,23,.3)
    }
  }
  :where(html[data-page=about]) .hero {
    min-height: 610px;
    padding-top: 118px;
    padding-bottom: 88px;
    display: block
  }
  :where(html[data-page=about]) .hero>.shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }
  :where(html[data-page=about]) .hero .kicker,:where(html[data-page=about]) .hero [class*=kicker] {
    margin: 0 0 22px;
    color: #4f524c;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=about]) .hero h1 {
    margin: 0;
    line-height: .86
  }
  :where(html[data-page=about]) .hero p {
    margin-top: 0
  }
  @media (max-width:950px) {
    :where(html[data-page=about]) .hero {
      min-height: auto;
      padding-top: 72px;
      padding-bottom: 70px
    }
    :where(html[data-page=about]) .hero .kicker,:where(html[data-page=about]) .hero [class*=kicker] {
      margin-bottom: 18px
    }
  }
  @media (max-width:620px) {
    :where(html[data-page=about]) .journey-note {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      white-space: nowrap;
      overflow: hidden;
      font-size: 10px;
      letter-spacing: .08em
    }
    :where(html[data-page=about]) .journey-note span:first-child {
      display: block;
      white-space: nowrap;
      font-size: 10px;
      letter-spacing: .08em
    }
    :where(html[data-page=about]) .journey-note span:last-child {
      display: none
    }
    :where(html[data-page=about]) .location-code,:where(html[data-page=about]) .location-code.sco {
      font-size: clamp(58px,14vw,82px)
    }
    :where(html[data-page=about]) .location-shadow {
      left: 50%;
      right: auto;
      top: 50%;
      width: max-content;
      max-width: 90%;
      text-align: center;
      transform: translate(-50%,-50%);
      white-space: nowrap
    }
    :where(html[data-page=about]) .location-panel:focus-visible .location-shadow,:where(html[data-page=about]) .location-panel:hover .location-shadow {
      transform: translate(-50%,-50%)
    }
  }
  @media (min-width:621px) and (max-width:900px) {
    :where(html[data-page=about]) .location-shadow {
      left: 50%;
      right: auto;
      top: 50%;
      width: max-content;
      max-width: 90%;
      text-align: center;
      transform: translate(-50%,-50%)
    }
  }
  :where(html[data-page=about]) .location-shadow {
    left: 50%;
    right: auto;
    top: 50%;
    width: max-content;
    max-width: 92%;
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: clamp(62px,7.1vw,122px);
    line-height: .82;
    letter-spacing: -.07em;
    font-weight: 500;
    color: rgba(33,35,31,.24);
    white-space: nowrap
  }
  :where(html[data-page=about]) .location-shadow-sf {
    width: 92%;
    max-width: 92%;
    white-space: normal;
    font-size: clamp(44px,4.8vw,76px);
    line-height: .9
  }
  :where(html[data-page=about]) .location-panel:focus-visible .location-shadow,:where(html[data-page=about]) .location-panel:hover .location-shadow {
    opacity: .92;
    transform: translate(-50%,-50%)
  }
  @media (max-width:900px) {
    :where(html[data-page=about]) .location-shadow {
      font-size: clamp(52px,12vw,92px)
    }
    :where(html[data-page=about]) .location-shadow-sf {
      font-size: clamp(48px,8vw,74px)
    }
  }
  @media (max-width:580px) {
    :where(html[data-page=about]) .location-shadow-sf {
      font-size: clamp(60px,17vw,90px)
    }
  }

}
@layer foundation {
  :root:where([data-page=contact]) {
    --cream: #f2efe9;
    --ink: #252824;
    --dark: #222622;
    --signal: #f2db38;
    --line: #d9d4ca;
    --muted: #6a6d66;
    --pad: clamp(20px,4.2vw,68px);
    --max: 1600px
  }
  :where(html[data-page=contact]) * {
    box-sizing: border-box
  }
  :where(html[data-page=contact]) body,html:where([data-page=contact]) {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
  }
  :where(html[data-page=contact]) a {
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=contact]) .shell {
    width: min(var(--max),calc(100% - var(--pad)*2));
    margin: auto
  }
  :where(html[data-page=contact]) .kicker {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=contact]) .contact-hero {
    padding: clamp(82px,9vw,140px)0 clamp(90px,10vw,150px)
  }
  :where(html[data-page=contact]) .contact-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 84px;
    align-items: end
  }
  :where(html[data-page=contact]) .contact-hero h1 {
    font-size: clamp(72px,9.4vw,150px);
    letter-spacing: -.075em;
    font-weight: 500;
    max-width: 7.5ch
  }
  :where(html[data-page=contact]) .contact-side {
    justify-self: end;
    max-width: 500px
  }
  :where(html[data-page=contact]) .contact-side p {
    margin: 0;
    font-size: clamp(18px,1.6vw,24px);
    line-height: 1.42;
    color: #494c46
  }
  :where(html[data-page=contact]) .contact-side p+p {
    margin-top: 22px;
    font-size: 15px;
    color: var(--muted)
  }
  :where(html[data-page=contact]) .contact-panel {
    background: var(--dark);
    color: #fff;
    padding: clamp(88px,9vw,132px)0
  }
  :where(html[data-page=contact]) .contact-panel-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 84px
  }
  :where(html[data-page=contact]) .contact-panel h2 {
    margin: 16px 0 0;
    font-size: clamp(50px,6.1vw,92px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=contact]) .contact-options {
    border-top: 1px solid rgba(255,255,255,.2)
  }
  :where(html[data-page=contact]) .contact-row {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255,255,255,.2)
  }
  :where(html[data-page=contact]) .contact-row .label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--signal)
  }
  :where(html[data-page=contact]) .contact-row strong {
    font-size: clamp(24px,2.4vw,36px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 500
  }
  :where(html[data-page=contact]) .contact-row small {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.45
  }
  :where(html[data-page=contact]) .contact-row a {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 5px;
    white-space: nowrap
  }
  :where(html[data-page=contact]) .audit-bottom a::after,:where(html[data-page=contact]) .contact-row a::after {
    content: "↗";
    margin-left: .35em
  }
  :where(html[data-page=contact]) .audit-block {
    background: var(--signal);
    padding: clamp(90px,10vw,150px)0
  }
  :where(html[data-page=contact]) .audit-block h2 {
    margin: 0;
    font-size: clamp(60px,8.6vw,136px);
    line-height: .84;
    letter-spacing: -.076em;
    font-weight: 500;
    max-width: 9ch
  }
  :where(html[data-page=contact]) .audit-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: end;
    margin-top: 58px;
    padding-top: 18px;
    border-top: 1px solid rgba(37,40,36,.2)
  }
  :where(html[data-page=contact]) .audit-bottom p {
    margin: 0;
    max-width: 470px;
    font-size: 17px;
    line-height: 1.45
  }
  :where(html[data-page=contact]) .audit-bottom a {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    padding-bottom: 6px
  }
  :where(html[data-page=contact]) .site-header {
    padding: 20px 0;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=contact]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=contact]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=contact]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=contact]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=contact]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=contact]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=contact]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=contact]) .site-header nav .active,:where(html[data-page=contact]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=contact]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=contact]) .contact-grid,:where(html[data-page=contact]) .contact-panel-grid {
      grid-template-columns: 1fr;
      gap: 40px
    }
    :where(html[data-page=contact]) .contact-side {
      justify-self: start
    }
    :where(html[data-page=contact]) .contact-row {
      grid-template-columns: 1fr;
      gap: 8px;
      align-items: start
    }
    :where(html[data-page=contact]) .contact-row a {
      justify-self: start;
      margin-top: 8px
    }
    :where(html[data-page=contact]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=contact]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=contact]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=contact]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=contact]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:620px) {
    :root:where([data-page=contact]) {
      --pad: 18px
    }
    :where(html[data-page=contact]) .contact-hero {
      padding-top: 60px
    }
    :where(html[data-page=contact]) .contact-hero h1 {
      font-size: 17vw
    }
    :where(html[data-page=contact]) .audit-bottom {
      align-items: flex-start;
      flex-direction: column
    }
  }
  :where(html[data-page=contact]) .form-section {
    background: var(--cream);
    padding: clamp(90px,10vw,150px)0
  }
  :where(html[data-page=contact]) .form-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 84px;
    align-items: start
  }
  :where(html[data-page=contact]) .form-grid h2 {
    margin: 16px 0 0;
    font-size: clamp(50px,6.1vw,92px);
    line-height: .92;
    letter-spacing: -.06em;
    font-weight: 500;
    max-width: 8ch
  }
  :where(html[data-page=contact]) .contact-form {
    border-top: 1px solid var(--line)
  }
  :where(html[data-page=contact]) .form-row {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    align-items: start
  }
  :where(html[data-page=contact]) .form-row label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-top: 13px
  }
  :where(html[data-page=contact]) .form-row input,:where(html[data-page=contact]) .form-row select,:where(html[data-page=contact]) .form-row textarea {
    width: 100%;
    outline: 0;
    color: var(--ink);
    font: inherit;
    font-size: 18px;
    line-height: 1.4;
    padding: 9px 0;
    border-radius: 0
  }
  :where(html[data-page=contact]) .form-row textarea {
    resize: vertical
  }
  :where(html[data-page=contact]) .form-row input::placeholder,:where(html[data-page=contact]) .form-row textarea::placeholder {
    color: #9a9c96
  }
  :where(html[data-page=contact]) .form-row select {
    appearance: none;
    cursor: pointer
  }
  :where(html[data-page=contact]) .form-submit {
    display: flex;
    padding-top: 24px
  }
  :where(html[data-page=contact]) .form-submit button {
    border: 0;
    padding: 16px 22px;
    font: inherit;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer
  }
  @media (max-width:900px) {
    :where(html[data-page=contact]) .form-grid {
      grid-template-columns: 1fr;
      gap: 38px
    }
  }
  @media (max-width:620px) {
    :where(html[data-page=contact]) .form-row {
      grid-template-columns: 1fr;
      gap: 4px
    }
    :where(html[data-page=contact]) .form-row label {
      padding-top: 0
    }
  }
  :where(html[data-page=contact]) #contact-form .kicker {
    color: #777a73
  }
  :where(html[data-page=contact]) .form-row {
    transition: background .18s ease
  }
  :where(html[data-page=contact]) .form-row input,:where(html[data-page=contact]) .form-row label,:where(html[data-page=contact]) .form-row select,:where(html[data-page=contact]) .form-row textarea {
    transition: background .18s ease,color .18s ease
  }
}
@layer components {
  :where(html[data-page=contact]) #contact-form {
    padding-top: clamp(72px,7vw,108px);
    padding-bottom: clamp(88px,9vw,132px)
  }
  :where(html[data-page=contact]) .contact-hero {
    min-height: 610px;
    padding-top: 118px;
    padding-bottom: 88px;
    display: block
  }
  :where(html[data-page=contact]) .contact-hero>.shell {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin-left: auto;
    margin-right: auto
  }
  :where(html[data-page=contact]) .contact-hero .kicker,:where(html[data-page=contact]) .contact-hero [class*=kicker] {
    margin: 0 0 22px;
    color: #4f524c;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600
  }
  :where(html[data-page=contact]) .contact-hero h1 {
    margin: 0;
    line-height: .86
  }
  :where(html[data-page=contact]) .contact-hero p {
    margin-top: 0
  }
  @media (max-width:950px) {
    :where(html[data-page=contact]) .contact-hero {
      min-height: auto;
      padding-top: 72px;
      padding-bottom: 70px
    }
    :where(html[data-page=contact]) .contact-hero .kicker,:where(html[data-page=contact]) .contact-hero [class*=kicker] {
      margin-bottom: 18px
    }
  }
  :where(html[data-page=contact]) .form-row {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none
  }
  :where(html[data-page=contact]) .form-row:hover {
    border: 0;
    background: #f4f1e9;
    box-shadow: none;
    transform: none
  }
  :where(html[data-page=contact]) .form-row:focus-within {
    border: 0;
    background: #f2db38;
    box-shadow: none;
    transform: none
  }
  :where(html[data-page=contact]) .form-row label {
    color: #555851;
    font-weight: 600
  }
  :where(html[data-page=contact]) .form-row input,:where(html[data-page=contact]) .form-row select,:where(html[data-page=contact]) .form-row textarea {
    border: 0;
    box-shadow: none
  }
  :where(html[data-page=contact]) .form-submit button {
    border-radius: 0;
    box-shadow: none;
    background: var(--ink);
    color: #fff
  }
  :where(html[data-page=contact]) .form-submit button:focus-visible,:where(html[data-page=contact]) .form-submit button:hover {
    background: var(--signal);
    color: var(--ink);
    transform: none
  }
  @media (max-width:620px) {
    :where(html[data-page=contact]) .form-row label {
      border: 0
    }
  }
  :where(html[data-page=contact]) .contact-form {
    gap: 8px;
    padding-inline: clamp(12px,1.4vw,20px)
  }
  :where(html[data-page=contact]) .form-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 0;
    background: #f7f5ef;
    overflow: hidden
  }
  :where(html[data-page=contact]) .form-row label {
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: 20px 24px;
    background: #ece8df;
    border: 0;
    white-space: normal;
    line-height: 1.12
  }
  :where(html[data-page=contact]) .form-row input,:where(html[data-page=contact]) .form-row select {
    min-height: 74px;
    padding: 18px 24px;
    background: #fbfaf6
  }
  :where(html[data-page=contact]) .form-row textarea {
    min-height: 210px;
    padding: 22px 24px;
    background: #fbfaf6
  }
  :where(html[data-page=contact]) .form-row label[for=contact-business],:where(html[data-page=contact]) .form-row label[for=contact-help],:where(html[data-page=contact]) .form-row label[for=contact-message] {
    white-space: nowrap
  }
  @media (min-width:760px) {
    :where(html[data-page=contact]) .form-row label {
      font-size: 10px;
      letter-spacing: .13em
    }
  }
  @media (max-width:759px) {
    :where(html[data-page=contact]) .form-row {
      grid-template-columns: 1fr
    }
    :where(html[data-page=contact]) .form-row label {
      min-height: auto;
      padding: 14px 18px;
      white-space: normal
    }
    :where(html[data-page=contact]) .form-row input,:where(html[data-page=contact]) .form-row select,:where(html[data-page=contact]) .form-row textarea {
      padding-left: 18px;
      padding-right: 18px
    }
  }
  :where(html[data-page=contact]) .form-row:hover label {
    background: #e6e1d6
  }
  :where(html[data-page=contact]) .form-row:hover input,:where(html[data-page=contact]) .form-row:hover select,:where(html[data-page=contact]) .form-row:hover textarea {
    background: #f5f1e8
  }
  :where(html[data-page=contact]) .form-row:focus-within input,:where(html[data-page=contact]) .form-row:focus-within label,:where(html[data-page=contact]) .form-row:focus-within select,:where(html[data-page=contact]) .form-row:focus-within textarea {
    background: #f2db38
  }
  :where(html[data-page=contact]) .form-submit {
    justify-content: flex-end
  }
  @media (max-width:620px) {
    :where(html[data-page=contact]) .form-submit {
      justify-content: flex-start
    }
  }
}

@layer components {
  @media (min-width:951px) {
    :where(html[data-page=contact]) .contact-hero h1 { max-width:9.5ch; }
  }
}
@layer foundation {
html[data-page=products]{--cream:#f2efe9;--paper:#fbfaf6;--ink:#252824;--dark:#222622;--signal:#f2db38;--pad:clamp(20px,4.2vw,68px);--max:1600px;background:var(--cream);color:var(--ink);scroll-behavior:smooth}
html[data-page=products] *,
html[data-page=products] *:before,
html[data-page=products] *:after{box-sizing:border-box}
html[data-page=products] body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
html[data-page=products] a{color:inherit;text-decoration:none}
html[data-page=products] .shell{width:min(var(--max),calc(100% - var(--pad)*2));margin:auto}
html[data-page=products] .kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
}
@layer components {
html[data-page=products] .products-hero{background:#252824;color:#f2efe9;padding:clamp(32px,5vw,80px) 0 35px;display:flex;align-items:stretch}
html[data-page=products] .products-hero .shell{display:flex;flex-direction:column;justify-content:space-between}
html[data-page=products] .products-topline,
html[data-page=products] .products-keyline{display:flex;justify-content:space-between;gap:20px;color:#c3c4b8;font-size:11px}
html[data-page=products] .products-lead{display:grid;grid-template-columns:1.55fr .65fr;align-items:end;gap:7vw;padding:90px 0}
html[data-page=products] .products-feature-heading{font-size:clamp(60px,7vw,132px);font-weight:500;letter-spacing:-.075em;line-height:.94;margin:0}
html[data-page=products] .products-feature-heading em,
html[data-page=products] .products-approach h2 em{font-family:Georgia,serif;color:#f2db38;font-weight:400}
html[data-page=products] .products-lead p{font-size:clamp(19px,1.75vw,27px);line-height:1.4;letter-spacing:-.035em;margin:0 0 34px}
html[data-page=products] .products-cta{display:flex;justify-content:space-between;gap:24px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;padding:17px 0;font-size:14px;font-weight:600}
html[data-page=products] .products-intro{padding:130px 0}
html[data-page=products] .products-intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:50px}
html[data-page=products] .products-intro h2,
html[data-page=products] .products-sectionhead h2,
html[data-page=products] .products-approach h2,
html[data-page=products] .products-bottom h2{font-size:clamp(42px,5.2vw,85px);font-weight:400;letter-spacing:-.065em;line-height:1.05;margin:0 0 35px}
html[data-page=products] .products-intro p{font-size:clamp(17px,1.55vw,23px);max-width:760px;line-height:1.5;letter-spacing:-.02em}
html[data-page=products] .products-services{background:#e4e0d6;padding:120px 0}
html[data-page=products] .products-sectionhead{display:flex;align-items:start;justify-content:space-between;margin-bottom:65px;gap:25px}
html[data-page=products] .products-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html[data-page=products] .products-grid article{background:#f8f6f0;min-height:360px;padding:clamp(25px,3vw,50px);display:flex;flex-direction:column;position:relative;overflow:hidden}
html[data-page=products] .products-grid article>span{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
html[data-page=products] .products-grid h3{font-size:clamp(35px,3.6vw,60px);letter-spacing:-.05em;font-weight:500;margin:75px 0 12px}
html[data-page=products] .products-grid p{max-width:390px;font-size:17px;line-height:1.4;margin:0;position:relative;z-index:1}
html[data-page=products] .products-symbol{position:absolute;right:25px;bottom:-38px;font-size:185px;color:rgba(37,40,36,.07);font-weight:300;line-height:1}
html[data-page=products] .products-approach{padding:135px 0;background:#f2db38}
html[data-page=products] .products-approach-body{display:grid;grid-template-columns:1.35fr .65fr;align-items:end;gap:70px;margin-top:45px}
html[data-page=products] .products-approach h2 em{color:#252824}
html[data-page=products] .products-approach p{font-size:19px;line-height:1.45}
html[data-page=products] .products-bottom{padding:130px 0;background:#252824;color:#f2efe9}
html[data-page=products] .products-bottom h2{margin:65px 0 50px}
html[data-page=products] .products-bottom a{display:inline-block;border-bottom:1px solid #f2db38;padding-bottom:12px;color:#f2db38}
@media(max-width:760px){
html[data-page=products] .products-hero{min-height:680px}
html[data-page=products] .products-lead,
html[data-page=products] .products-intro-grid,
html[data-page=products] .products-approach-body{grid-template-columns:1fr;gap:30px}
html[data-page=products] .products-lead{padding:90px 0 65px}
html[data-page=products] .products-feature-heading{font-size:clamp(52px,11vw,90px)}
html[data-page=products] .products-intro,
html[data-page=products] .products-services,
html[data-page=products] .products-approach,
html[data-page=products] .products-bottom{padding:75px 0}
html[data-page=products] .products-sectionhead{display:block}
html[data-page=products] .products-grid{grid-template-columns:1fr}
html[data-page=products] .products-grid article{min-height:300px}
html[data-page=products] .products-grid h3{margin-top:50px}
}
  :where(html[data-page=products]) .site-header {
    position: relative;
    z-index: 30;
    padding: 20px 0;
    background: #f2efe9;
    color: #252824;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  }
  :where(html[data-page=products]) .site-header .inner {
    width: min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
  }
  :where(html[data-page=products]) .site-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.035em;
    flex-shrink: 0
  }
  :where(html[data-page=products]) .site-header .brand img {
    display: block;
    width: 58px;
    height: auto;
    filter: none
  }
  :where(html[data-page=products]) .site-header .brand span {
    display: inline
  }
  :where(html[data-page=products]) .site-header .brand em {
    font-style: normal;
    color: inherit
  }
  :where(html[data-page=products]) .site-header nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .11em
  }
  :where(html[data-page=products]) .site-header nav a {
    display: inline-block;
    white-space: nowrap;
    color: inherit;
    text-decoration: none
  }
  :where(html[data-page=products]) .site-header nav .audit-link {
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px
  }
  :where(html[data-page=products]) .site-header .audit-link::after {
    content: "↗";
    display: inline-block;
    font-family: Arial,sans-serif;
    font-size: .9em;
    margin-left: .35em;
    line-height: 1;
    vertical-align: .02em;
    transform: translateY(-.02em)
  }
  @media (max-width:900px) {
    :where(html[data-page=products]) .site-header {
      padding: 16px 0
    }
    :where(html[data-page=products]) .site-header .brand img {
      width: 48px
    }
    :where(html[data-page=products]) .site-header .brand span {
      display: none
    }
    :where(html[data-page=products]) .site-header .inner {
      gap: 12px
    }
    :where(html[data-page=products]) .site-header nav {
      gap: clamp(8px,2vw,18px);
      font-size: 10px;
      letter-spacing: .06em
    }
  }
  @media (max-width:520px) {
    :where(html[data-page=products]) .site-header .inner {
      width: calc(100% - 36px)
    }
    :where(html[data-page=products]) .site-header nav {
      font-size: 9px;
      gap: clamp(6px,2vw,10px);
      letter-spacing: .04em
    }
  }

html[data-page=products] .site-header .brand img{max-width:58px}
html[data-page=products] .products-hero {
  margin:0;
  border-radius:0;
  width:100%;
  max-width:none;
  min-height:clamp(600px,65svh,760px);
}
@media(max-width:760px) {
  html[data-page=products] .products-hero {min-height:650px;}
}html[data-page=products] .products-editorial-intro {color:#242622;}
}
@layer components {
html[data-page] .service-intro {
  box-sizing:border-box;
  background:#f1efe9;
  min-height:720px;
  padding:110px 0 100px;
  display:flex;
  align-items:center;
}
html[data-page] .service-intro>.shell {
  box-sizing:border-box;
  width:min(1600px,calc(100% - clamp(20px,4.2vw,68px)*2));
  margin-inline:auto;
}
html[data-page] .service-intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
  column-gap:clamp(36px,5vw,110px);
  align-items:end;
}
html[data-page] .service-intro .kicker {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#4f524c;
  margin:0 0 48px;
}
html[data-page] .service-intro h1 {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(65px,8vw,132px);
  letter-spacing:-.075em;
  line-height:.9;
  max-width:950px;
  margin:0;
}
html[data-page] .service-intro-copy,
html[data-page] .service-intro-grid>p {
  justify-self:end;
  width:100%;
  max-width:500px;
  padding:0 0 10px;
  margin:0;
}
html[data-page] .service-intro-copy p,
html[data-page] .service-intro-grid>p {
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(18px,1.8vw,27px);
  line-height:1.38;
  font-weight:400;
  letter-spacing:-.035em;
  color:#464943;
}
@media(max-width:760px){
  html[data-page] .service-intro {min-height:0;padding:76px 0 68px;}
  html[data-page] .service-intro-grid {grid-template-columns:1fr;gap:30px;}
  html[data-page] .service-intro h1 {font-size:clamp(52px,12vw,82px);}
  html[data-page] .service-intro .kicker {margin-bottom:24px;}
  html[data-page] .service-intro-copy,
html[data-page] .service-intro-grid>p {justify-self:start;padding:0;}
}

}
@layer components {
html:is([data-page=work],[data-page=about],[data-page=contact],[data-page=pricing],[data-page=products]) main h1 {
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-weight:400;
 letter-spacing:-.075em;
 line-height:.9;
 font-size:clamp(64px,8.5vw,140px);
 text-wrap:balance;
}
html:is([data-page=work],[data-page=about],[data-page=contact],[data-page=pricing]) main h2,
html[data-page=products] main h2 {
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-weight:400;
 letter-spacing:-.065em;
}
html[data-page=products] .products-feature-heading em {
 font-family:Georgia,serif;
 font-style:italic;
 font-weight:400;
}
@media(max-width:700px){html:is([data-page=work],[data-page=about],[data-page=contact],[data-page=pricing],[data-page=products]) main h1{font-size:clamp(50px,11vw,82px);line-height:.92;}}

html[data-page=products] .products-feature-heading { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.075em;line-height:.9;font-size:clamp(64px,8.5vw,140px);text-wrap:balance; }
@media(max-width:700px){html[data-page=products] .products-feature-heading{font-size:clamp(50px,11vw,82px);line-height:.92;}}
}
@layer foundation {
  .site-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
  }
  .menu-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: 0 0;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    position: relative;
    z-index: 1002;
    color: inherit
  }
  .menu-toggle span {
    position: absolute;
    left: 9px;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: transform .22s ease,top .22s ease
  }
  .menu-toggle span:first-child {
    top: 14px
  }
  .menu-toggle span:last-child {
    top: 22px
  }
  @media (max-width:760px) {
    .site-header .inner {
      position: relative
    }
    .menu-toggle {
      display: block
    }
    .site-header nav {
      top: calc(100% + 10px);
      right: 0;
      left: 0;
      box-shadow: 0 14px 30px rgba(37,40,36,.08)
    }
    .site-header nav a {
      width: 100%
    }
    .site-header.menu-open .menu-toggle span:first-child {
      top: 18px;
      transform: rotate(45deg)
    }
    .site-header.menu-open .menu-toggle span:last-child {
      top: 18px;
      transform: rotate(-45deg)
    }
  }
}
@layer components {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(242,239,233,.96)
  }
  @media (max-width:760px) {
    .site-header {
      position: sticky;
      top: 0;
      z-index: 3000
    }
    .site-header .inner {
      position: relative;
      z-index: 3002
    }
    .menu-toggle {
      z-index: 3003
    }
    .site-header nav {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100dvh;
      display: none;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      padding: 110px 28px 40px;
      background: #f2efe9;
      box-shadow: none;
      overflow: auto;
      z-index: 3001
    }
    .site-header.menu-open nav {
      display: flex
    }
    .site-header nav a {
      width: 100%;
      padding: 16px 0;
      border: 0;
      border-bottom: 1px solid rgba(37,40,36,.1);
      font-size: clamp(28px,8vw,42px);
      line-height: 1;
      letter-spacing: -.03em;
      text-transform: none
    }
    .site-header nav a:last-child {
      border-bottom: 0
    }
    body.menu-lock {
      overflow: hidden;
    }
  }
.bf-services-wrap{position:relative;display:inline-flex;align-items:center}
.bf-services-trigger{font:inherit;letter-spacing:inherit;text-transform:uppercase;border:0;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;gap:.35rem;padding:8px 0}
.bf-services-trigger svg{width:12px;height:12px;transition:transform .2s}
.bf-services-wrap.open .bf-services-trigger svg{transform:rotate(180deg)}
.bf-service-menu{display:none;position:absolute;top:calc(100% + 15px);left:-24px;width:370px;max-width:min(86vw,370px);background:#f2f0e9;border:1px solid #d2cfc5;box-shadow:0 16px 45px #0002;padding:13px 23px;z-index:300;color:#242420;text-transform:none;letter-spacing:normal}
.bf-services-wrap.open .bf-service-menu{display:block}
.bf-service-item{display:block;text-decoration:none;color:inherit;padding:14px 0;border-bottom:1px solid #d8d5cb}
.bf-service-item strong{display:block;font-size:16px;line-height:1.3}
.bf-service-item small{display:block;opacity:.65;margin-top:5px;font-size:12px;line-height:1.4}
.bf-service-small{font-size:12px;line-height:1.5;padding:14px 0;color:#4c4c48}
.bf-services-wrap button:focus-visible,
.bf-service-menu a:focus-visible{outline:2px solid #b8a000;outline-offset:3px}

@media(max-width:860px){.bf-service-menu{position:static;box-shadow:none;width:100%;max-width:none}.bf-services-wrap{display:block}.bf-services-trigger{width:100%;justify-content:space-between}}
@media (max-width:760px) {
  .site-header.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header nav {
    justify-content: safe center;
    box-sizing: border-box;
    border-top: max(76px,calc(env(safe-area-inset-top) + 62px)) solid #f2efe9;
    padding: 14px 28px max(28px,env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .site-header nav > * { flex-shrink: 0; }
  .site-header nav .bf-services-wrap { width: 100%; }
  .site-header nav > a,
  .site-header nav .bf-services-trigger {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid rgba(37,40,36,.1);
    font-family: inherit;
    font-size: clamp(28px,8vw,42px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: none;
    text-align: left;
  }
  .site-header nav > a:last-child { border-bottom: 0; }
  .site-header nav .bf-services-trigger { justify-content: space-between; }
  .site-header nav .bf-services-trigger svg { width: 20px; height: 20px; flex-shrink: 0; }
  .site-header nav .bf-service-menu { border: 0; border-bottom: 1px solid rgba(37,40,36,.1); background: transparent; padding: 0 0 8px 16px; }
  .site-header nav .bf-service-item { padding: 14px 0; font-size: 18px; line-height: 1.35; letter-spacing: normal; white-space: normal; }
  .site-header nav .bf-service-item strong { font-size: inherit; font-weight: 500; }
  .site-header nav .bf-service-item small { font-size: 14px; }
  .site-header.menu-open .menu-toggle { position: fixed; top: max(14px,env(safe-area-inset-top)); right: max(clamp(20px,4.2vw,68px),env(safe-area-inset-right)); width: 44px; height: 44px; }
  .site-header.menu-open .menu-toggle span { left: 12px; top: 22px; }
}

}
@layer components {
  .global-footer {
    background: #252824;
    color: rgba(255,255,255,.7);
    padding: 18px 0 22px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none
  }
  .global-footer,.global-footer * {
    box-sizing: border-box
  }
  .global-footer__inner {
    width: min(1600px,calc(100% - clamp(18px,4.2vw,68px)*2));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 24px
  }
  .global-footer__brand {
    grid-column: 1;
    grid-row: 1;
    opacity: .9
  }
  .global-footer__services {
    grid-column: 1 / -1;
    grid-row: 2
  }
  .global-footer__copyright {
    grid-column: 2;
    grid-row: 1;
    justify-self: end
  }
  .global-footer__links {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px
  }
  .global-footer__links a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    color: inherit;
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    border: 0
  }
  .global-footer__links a:hover,.global-footer__links a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px
  }
  @media (min-width:761px) {
    .global-footer__inner {
      grid-template-columns: 1fr auto auto
    }
    .global-footer__services {
      grid-column: 2;
      grid-row: 1
    }
    .global-footer__copyright {
      grid-column: 3
    }
    .global-footer__links {
      grid-row: 2;
      justify-content: flex-end
    }
  }
  @media (min-width:1024px) {
    .global-footer__inner {
      grid-template-columns: auto 1fr auto auto
    }
    .global-footer__services {
      justify-self: center
    }
    .global-footer__links {
      grid-column: 3;
      grid-row: 1
    }
    .global-footer__copyright {
      grid-column: 4
    }
  }
}
@layer accessibility {
  .skip-link {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 5000;
    padding: 12px 18px;
    background: var(--cream);
    color: var(--ink)
  }
  .skip-link:not(:focus) {
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap
  }
  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px
  }
  html:not(.reveal-enabled) .reveal {
    opacity: 1;
    transform: none
  }
  :where(html[data-page=contact]) .form-row :is(input,select,textarea):focus {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--ink)
  }
  .form-status[hidden] {
    display: none
  }
  .form-status {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.5
  }
  [aria-busy=true] button {
    cursor: wait
  }
  @media (prefers-reduced-motion:reduce) {
    *,::after,::before {
      scroll-behavior: auto;
      animation-duration: .01ms;
      transition-duration: .01ms
    }
  }
}