/*
 * Fonts local to the AttentionHome component.
 * Family names are prefixed with "Attention" to avoid collisions with
 * styles in the consuming Webflow/DevLink project.
 *
 * @font-face src must be absolute hosted URLs — never relative files.
 * Webflow CLI packs SSR assets as UTF-8, so relative font urls become
 * corrupted data URIs and staging falls back to system sans.
 */

@property --nav-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 80px;
}

:host {
  --nav-h: 80px;
  --nav-offset: 80px;
}

html {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  :host {
    --nav-h: 72px;
    --nav-offset: 72px;
  }
}

@font-face {
  font-family: "AttentionRoobert";
  src:
    url("https://attention-home-preview.vercel.app/fonts/Roobert-Medium.woff2")
      format("woff2"),
    url("https://attention-home-preview.vercel.app/fonts/Roobert-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionOverusedGrotesk";
  src: url("https://attention-home-preview.vercel.app/fonts/OverusedGrotesk-Roman.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionOverusedGrotesk";
  src: url("https://attention-home-preview.vercel.app/fonts/OverusedGrotesk-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AttentionDepartureMono";
  src: url("https://attention-home-preview.vercel.app/fonts/DepartureMono-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.ViLGPYor1UWnxXK0ECqH {
  background: #fafafa;
  margin-top: -1px;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-hover: 220ms;
}

.cc3dwlAlMWjoo7ScykKw {
  background: transparent;
  margin-top: -1px;
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-fast: 160ms;
  --duration-hover: 220ms;
}

.ViLGPYor1UWnxXK0ECqH,
.cc3dwlAlMWjoo7ScykKw,
.ViLGPYor1UWnxXK0ECqH *,
.cc3dwlAlMWjoo7ScykKw * {
  box-sizing: border-box;
}

.mHzkmJrM7lWlmHhYNzlm {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 1023px) {
  .mHzkmJrM7lWlmHhYNzlm {
    padding: 0;
  }
}

.N9M41aJzjL657JFdAukh {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.OKBvzi81sTwBLfYSS4YG,
.Z9M7jE4Zqq_WOYzuDu2A,
.oZ3sEvNVrpL1d8n4lDFM {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.OKBvzi81sTwBLfYSS4YG {
    height: 64px;
}

.OKBvzi81sTwBLfYSS4YG+.Z9M7jE4Zqq_WOYzuDu2A,
.Z9M7jE4Zqq_WOYzuDu2A+.OKBvzi81sTwBLfYSS4YG,
.Z9M7jE4Zqq_WOYzuDu2A+.Z9M7jE4Zqq_WOYzuDu2A,
.Z9M7jE4Zqq_WOYzuDu2A+.oZ3sEvNVrpL1d8n4lDFM {
    margin-top: -1px;
}

.ch8H5n2Io2V9C8GfzMA8,
.UbbukL7EKWDOkcxReT5C,
.Ed7EbUAf26cN65ogXFQO,
.SoMX7MmIY0xNhW7MDjqY,
.VguZUehS9vIPvL4mpVOb,
.UA2zV32V8ZbNqyGbQE_F {
    border: 1px solid #ededed;
    border-radius: 8px;
}

.ch8H5n2Io2V9C8GfzMA8,
.VguZUehS9vIPvL4mpVOb {
    width: 104px;
    flex-shrink: 0;
}

.Z9M7jE4Zqq_WOYzuDu2A>*+*,
.OKBvzi81sTwBLfYSS4YG>*+*,
.oZ3sEvNVrpL1d8n4lDFM>*+* {
    margin-left: -1px;
}

.UbbukL7EKWDOkcxReT5C {
    flex: 1 1 0;
    min-width: 0;
}

.Ed7EbUAf26cN65ogXFQO {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    gap: 32px;
    align-items: flex-start;
    padding: 31px;
}

.stqjgViyawDLpicbmK34,
.fs3p0xaPLKxBpgQsT0bg,
.nCTrwLrHLwpMibNsVogm,
.HC_Hi_nn7W1IqSkfHnKK {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    flex-shrink: 0;
}

.stqjgViyawDLpicbmK34,
.nCTrwLrHLwpMibNsVogm {
    gap: 32px;
}

.YHcReRqeFUkLLXsiBu70,
.sUk6E2vXnq7_GMsIHFQs,
.IbFglTfEa3ekRx6uPvhC,
.wDgo0FIqIoFdF6hZpF40 {
    display: contents;
}

.WcL6V1AQ6ifqI8seXO3i {
    display: none;
}

.fs3p0xaPLKxBpgQsT0bg,
.HC_Hi_nn7W1IqSkfHnKK {
    gap: 16px;
}

.Hkdaj_cIFBJDI0VZ3hdv {
    display: flex;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.Z2AN3AK7XsyyHfoCJEAl {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.t27BGIGZfwqhE3BXmy7L {
    font-family: "AttentionRoobert", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.72px;
    color: #14131a;
    font-feature-settings: "ss11" 1;
}

.oYmKI2v4NWgDB7FrmFYA {
    margin: 0;
    font-family: "AttentionDepartureMono", monospace;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: #14131a;
}

.mAkIU18Aj8U2vISjIzTk {
    margin: 0;
    font-family: "AttentionOverusedGrotesk", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #706f74;
}

.QAk4Z_5l1ypkEqwN7LO3 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.F_nXZVcroHHfjkwt3483 {
    display: block;
    width: 48px;
    height: 48px;
    opacity: 0.5;
    object-fit: cover;
}

.lW7d25mhCFLRGdWMyWBv {
    margin: 0;
    font-family: "AttentionDepartureMono", monospace;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: #14131a;
}

.z9MENCr_GJZeQPlrMlGw {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ONvgx3S4j5UGEyakZhvv {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 0;
}

.MXqYH3qEqX3TKXZexbwy,
.oJZiOz8yMGTf9csHpIfD {
    font-family: "AttentionOverusedGrotesk", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #424147;
    text-decoration: none;
    transition: color 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.MXqYH3qEqX3TKXZexbwy {
    flex: 1 0 0;
    min-width: 0;
}

@media (hover: hover) and (pointer: fine) {

    .MXqYH3qEqX3TKXZexbwy:hover,
    .oJZiOz8yMGTf9csHpIfD:hover {
        color: #4545e5;
    }
}

.SoMX7MmIY0xNhW7MDjqY {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 31px;
}

.ROmqUfjpb8hmIbSWPj3w {
    margin: 0;
    font-family: "AttentionDepartureMono", monospace;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.12px;
    text-transform: uppercase;
    color: #9e9ea0;
    white-space: nowrap;
}

.aXFh4gh3BoRu4Y2XnC2m {
    display: flex;
    gap: 24px;
    align-items: center;
}

.VguZUehS9vIPvL4mpVOb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yNFLFwg6KowEdaaLrkPg {
    display: block;
    width: 16px;
    height: 24px;
}

.UA2zV32V8ZbNqyGbQE_F {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 63px;
}

.ylkChicriykJEo9I0wV6 {
    display: block;
    width: calc(100% + 2px);
    height: auto;
}

@media (max-width: 1279px) and (min-width: 1024px) {

    .ch8H5n2Io2V9C8GfzMA8,
    .VguZUehS9vIPvL4mpVOb {
        width: 48px;
    }

    .Ed7EbUAf26cN65ogXFQO {
        gap: 20px;
        padding: 24px 20px;
    }

    .stqjgViyawDLpicbmK34,
    .fs3p0xaPLKxBpgQsT0bg,
    .nCTrwLrHLwpMibNsVogm,
    .HC_Hi_nn7W1IqSkfHnKK {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .MXqYH3qEqX3TKXZexbwy {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1023px) {
    .ch8H5n2Io2V9C8GfzMA8 {
        display: none;
    }

    .Z9M7jE4Zqq_WOYzuDu2A>*+*,
    .OKBvzi81sTwBLfYSS4YG>*+* {
        margin-left: 0;
    }

    .oZ3sEvNVrpL1d8n4lDFM {
        flex-direction: column;
    }

    .oZ3sEvNVrpL1d8n4lDFM>*+* {
        margin-left: 0;
        margin-top: -1px;
    }

    .OKBvzi81sTwBLfYSS4YG {
        height: 48px;
    }

    .Ed7EbUAf26cN65ogXFQO {
        flex-direction: column;
        padding: 20px;
        gap: 40px;
    }

    .stqjgViyawDLpicbmK34 {
        width: 100%;
        gap: 20px;
    }

    .YHcReRqeFUkLLXsiBu70 {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }

    .sUk6E2vXnq7_GMsIHFQs {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mAkIU18Aj8U2vISjIzTk {
        width: 100%;
    }

    .QAk4Z_5l1ypkEqwN7LO3 {
        flex-shrink: 0;
    }

    .wDgo0FIqIoFdF6hZpF40 {
        display: none;
    }

    .WcL6V1AQ6ifqI8seXO3i {
        display: contents;
    }

    .IbFglTfEa3ekRx6uPvhC {
        display: grid;
        grid-template-columns: 180px 180px;
        justify-content: space-between;
        width: 100%;
    }

    .fs3p0xaPLKxBpgQsT0bg {
        width: 180px;
        gap: 20px;
    }

    .HC_Hi_nn7W1IqSkfHnKK {
        width: 100%;
        gap: 8px;
    }

    .ONvgx3S4j5UGEyakZhvv {
        padding: 6px 0;
    }

    .SoMX7MmIY0xNhW7MDjqY {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        gap: 20px;
        padding: 20px;
        text-align: center;
    }

    .Hkdaj_cIFBJDI0VZ3hdv {
        overflow: visible;
        flex-shrink: 0;
    }

    .t27BGIGZfwqhE3BXmy7L {
        white-space: nowrap;
    }

    .VguZUehS9vIPvL4mpVOb {
        width: 100%;
        height: 48px;
    }

    .UA2zV32V8ZbNqyGbQE_F {
        flex: none;
        width: 100%;
        height: 116px;
        min-height: 116px;
        padding: 40px 0 0;
        overflow: hidden;
    }

    .ylkChicriykJEo9I0wV6 {
        width: 100%;
        height: 76px;
        filter: brightness(0.62);
    }
}