/* ============================================================
   KVA STUDIOS
   P36-C COMPANY STRUCTURAL FOUNDATION
   Namespace: co1-*
   ============================================================ */

.co1-page {
  --co1-bg: #090b0e;
  --co1-bg-soft: #0d1015;
  --co1-panel: #11151b;
  --co1-paper: #e9e3d7;
  --co1-paper-text: #181a1d;
  --co1-text: #f2efe8;
  --co1-muted: rgba(242, 239, 232, .61);
  --co1-muted-2: rgba(242, 239, 232, .38);
  --co1-line: rgba(255, 255, 255, .105);
  --co1-line-strong: rgba(255, 255, 255, .19);
  --co1-gold: #c8aa67;
  --co1-gold-soft: #dec68d;
  --co1-blue: #7d96a8;
  --co1-green: #668d75;

  overflow: clip;

  color: var(--co1-text);

  background:
    radial-gradient(
      circle at 84% 7%,
      rgba(125, 150, 168, .08),
      transparent 28%
    ),
    var(--co1-bg);
}


.co1-section {
  position: relative;

  padding:
    clamp(82px, 8vw, 132px)
    clamp(22px, 5vw, 76px);

  border-top:
    1px solid var(--co1-line);
}


.co1-kicker {
  margin: 0;

  color: var(--co1-gold-soft);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}


.co1-section-heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, .6fr);

  gap:
    clamp(48px, 10vw, 150px);

  align-items: end;

  margin-bottom:
    clamp(56px, 7vw, 104px);
}


.co1-section-heading > div {
  max-width: 880px;
}


.co1-section-heading h2,
.co1-direction__copy h2,
.co1-contact h2 {
  margin:
    18px 0 0;

  font-size:
    clamp(38px, 5vw, 72px);

  line-height: .99;
  letter-spacing: -.052em;
}


.co1-section-heading > p,
.co1-direction__copy > p,
.co1-contact__side > p {
  margin: 0;

  color: var(--co1-muted);

  font-size:
    clamp(15px, 1.25vw, 18px);

  line-height: 1.72;
}


/* ============================================================
   HERO
   ============================================================ */

.co1-hero {
  min-height:
    min(900px, 94vh);

  padding-top:
    clamp(142px, 15vh, 190px);

  display: grid;

  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(440px, .9fr);

  grid-template-rows:
    1fr auto;

  gap:
    clamp(54px, 8vw, 130px);

  align-items: center;

  border-top: 0;

  background:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


.co1-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 72% 43%,
      rgba(200,170,103,.095),
      transparent 23%
    );
}


.co1-hero__copy {
  position: relative;
  z-index: 2;

  max-width: 870px;
}


.co1-hero h1 {
  margin:
    20px 0 0;

  max-width: 900px;

  font-size:
    clamp(48px, 6.3vw, 94px);

  line-height: .91;
  letter-spacing: -.062em;
}


.co1-hero h1 span {
  color: var(--co1-gold-soft);
}


.co1-lead {
  max-width: 680px;

  margin:
    32px 0 0;

  color: var(--co1-muted);

  font-size:
    clamp(16px, 1.35vw, 20px);

  line-height: 1.72;
}


.co1-hero__meta {
  margin-top: 38px;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  color: var(--co1-muted-2);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
}


.co1-hero__meta i {
  width: 24px;
  height: 1px;

  background:
    var(--co1-line-strong);
}


/* ---------- Observer ---------- */

.co1-observer {
  position: relative;

  width:
    min(100%, 580px);

  aspect-ratio: 1;

  justify-self: end;

  border:
    1px solid var(--co1-line);

  border-radius: 50%;

  background:
    rgba(7, 9, 12, .64);

  isolation: isolate;
}


.co1-observer__grid {
  position: absolute;
  inset: 9%;

  border-radius: 50%;

  opacity: .28;

  background:
    linear-gradient(
      rgba(255,255,255,.06) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.06) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  mask-image:
    radial-gradient(
      circle,
      #000 44%,
      transparent 74%
    );
}


.co1-observer__orbit {
  position: absolute;

  border:
    1px solid rgba(200,170,103,.24);

  border-radius: 50%;
}


.co1-observer__orbit--outer {
  inset: 13%;
}


.co1-observer__orbit--inner {
  inset: 29%;

  border-color:
    rgba(125,150,168,.27);
}


.co1-observer__orbit::before,
.co1-observer__orbit::after {
  content: "";

  position: absolute;

  background:
    var(--co1-line-strong);
}


.co1-observer__orbit::before {
  top: 50%;
  left: -10%;

  width: 120%;
  height: 1px;
}


.co1-observer__orbit::after {
  top: -10%;
  left: 50%;

  width: 1px;
  height: 120%;
}


.co1-observer__node {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--co1-gold);

  box-shadow:
    0 0 0 5px rgba(200,170,103,.08);
}


.co1-observer__node--a {
  top: 13%;
  left: 18%;
}


.co1-observer__node--b {
  right: 9%;
  bottom: 28%;
}


.co1-observer__node--c {
  left: 10%;
  bottom: 18%;

  background:
    var(--co1-blue);

  box-shadow:
    0 0 0 5px rgba(125,150,168,.08);
}


.co1-observer__core {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 128px;
  height: 128px;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  border:
    1px solid rgba(200,170,103,.4);

  border-radius: 50%;

  background:
    rgba(11,14,18,.95);

  box-shadow:
    0 0 70px rgba(200,170,103,.08);
}


.co1-observer__core img {
  width: 51px;
  height: 51px;

  object-fit: contain;
}


.co1-observer__core span {
  position: absolute;

  bottom: -36px;

  white-space: nowrap;

  color: var(--co1-muted-2);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .15em;
}


.co1-observer__label {
  position: absolute;

  padding:
    7px 9px;

  border:
    1px solid var(--co1-line);

  background:
    rgba(9,11,14,.92);

  color: var(--co1-muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}


.co1-observer__label--reality {
  top: 15%;
  right: 2%;
}


.co1-observer__label--context {
  left: 1%;
  bottom: 24%;
}


.co1-observer__label--system {
  right: 7%;
  bottom: 9%;
}


/* ---------- Hero process ---------- */

.co1-process {
  position: relative;
  z-index: 2;

  grid-column:
    1 / -1;

  padding-top: 26px;

  display: grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto 1fr
    auto 1fr
    auto 1fr
    auto;

  gap: 14px;

  align-items: center;

  border-top:
    1px solid var(--co1-line);
}


.co1-process span {
  display: grid;
  gap: 5px;

  color: var(--co1-muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
}


.co1-process span b {
  color: var(--co1-gold-soft);

  font-size: 8px;
  font-weight: 700;
}


.co1-process > i {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--co1-line-strong),
      var(--co1-line)
    );
}


/* ============================================================
   PURPOSE
   ============================================================ */

.co1-purpose {
  background:
    var(--co1-paper);

  color:
    var(--co1-paper-text);
}


.co1-purpose .co1-kicker {
  color:
    #7b6435;
}


.co1-purpose .co1-section-heading > p {
  color:
    rgba(24,26,29,.63);
}


.co1-model-compare {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border:
    1px solid rgba(24,26,29,.14);
}


.co1-model {
  min-height: 390px;

  padding:
    clamp(28px, 4vw, 54px);

  display: flex;
  flex-direction: column;
}


.co1-model + .co1-model {
  border-left:
    1px solid rgba(24,26,29,.14);
}


.co1-model--generic {
  background:
    rgba(24,26,29,.035);
}


.co1-model--kva {
  background:
    #171a1e;

  color:
    var(--co1-text);
}


.co1-model__head {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding-bottom: 22px;

  border-bottom:
    1px solid currentColor;

  border-color:
    rgba(24,26,29,.14);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
}


.co1-model--kva .co1-model__head {
  border-color:
    var(--co1-line);
}


.co1-model__head small {
  opacity: .45;
}


.co1-model__flow {
  margin:
    auto 0;

  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  gap: 12px;

  align-items: center;

  text-align: center;
}


.co1-model__flow strong {
  font-size:
    clamp(12px, 1.2vw, 16px);

  letter-spacing: .04em;
}


.co1-model__flow i {
  font-style: normal;

  opacity: .35;
}


.co1-model > p {
  margin: 0;

  max-width: 590px;

  opacity: .62;

  line-height: 1.65;
}


/* ============================================================
   UNDERSTANDING
   ============================================================ */

.co1-understanding {
  background:
    linear-gradient(
      180deg,
      #090b0e,
      #0c1014
    );
}


.co1-radar {
  display: grid;

  grid-template-columns:
    minmax(360px, .82fr)
    minmax(0, 1.18fr);

  gap:
    clamp(58px, 9vw, 136px);

  align-items: center;
}


.co1-radar__field {
  position: relative;

  width: 100%;

  max-width: 600px;

  aspect-ratio: 1;

  justify-self: center;
}


.co1-radar__ring {
  position: absolute;

  border:
    1px solid var(--co1-line);

  border-radius: 50%;
}


.co1-radar__ring--1 {
  inset: 6%;
}


.co1-radar__ring--2 {
  inset: 24%;
}


.co1-radar__ring--3 {
  inset: 40%;

  border-color:
    rgba(200,170,103,.28);
}


.co1-radar__cross {
  position: absolute;

  top: 50%;
  left: 50%;

  background:
    var(--co1-line);
}


.co1-radar__cross--x {
  width: 88%;
  height: 1px;

  transform:
    translate(-50%, -50%);
}


.co1-radar__cross--y {
  width: 1px;
  height: 88%;

  transform:
    translate(-50%, -50%);
}


.co1-radar__core {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 154px;
  height: 154px;

  transform:
    translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border:
    1px solid rgba(200,170,103,.34);

  border-radius: 50%;

  background:
    #0c1014;

  text-align: center;
}


.co1-radar__core small {
  color:
    var(--co1-muted-2);

  font-size: 7px;
  letter-spacing: .13em;
}


.co1-radar__core strong {
  margin-top: 8px;

  color:
    var(--co1-gold-soft);

  font-size: 15px;
}


.co1-radar__core span {
  margin-top: 5px;

  color:
    var(--co1-muted-2);

  font-size: 7px;
  letter-spacing: .1em;
}


.co1-context-signals {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--co1-line);
}


.co1-context-signals article {
  min-height: 165px;

  padding:
    24px 24px 28px;

  border-right:
    1px solid var(--co1-line);

  border-bottom:
    1px solid var(--co1-line);
}


.co1-context-signals article:nth-child(even) {
  border-right: 0;
}


.co1-context-signals article:last-child {
  grid-column:
    1 / -1;

  border-right: 0;
}


.co1-context-signals article > span {
  color:
    var(--co1-gold-soft);

  font-size: 9px;
}


.co1-context-signals strong {
  display: block;

  margin-top: 32px;

  font-size:
    clamp(18px, 1.7vw, 24px);
}


.co1-context-signals p {
  margin:
    8px 0 0;

  color:
    var(--co1-muted);

  font-size: 13px;

  line-height: 1.6;
}


/* ============================================================
   COMPANY ARCHITECTURE
   ============================================================ */

.co1-architecture {
  background:
    #0a0d11;
}


.co1-company-map {
  position: relative;

  max-width: 1280px;

  margin:
    0 auto;
}


.co1-company-map__root {
  width: fit-content;

  margin:
    0 auto;

  padding:
    18px 24px;

  display: flex;
  align-items: center;
  gap: 16px;

  border:
    1px solid rgba(200,170,103,.28);

  background:
    rgba(200,170,103,.045);
}


.co1-company-map__root img {
  width: 38px;
  height: 38px;

  object-fit: contain;
}


.co1-company-map__root div {
  display: grid;
  gap: 4px;
}


.co1-company-map__root small {
  color:
    var(--co1-muted-2);

  font-size: 7px;
  letter-spacing: .13em;
}


.co1-company-map__root strong {
  font-size: 15px;
  letter-spacing: .04em;
}


.co1-company-map__stem {
  width: 1px;
  height: 62px;

  margin:
    0 auto;

  background:
    var(--co1-line-strong);
}


.co1-company-map__branches {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    clamp(30px, 4vw, 60px);

  padding-top: 42px;
}


.co1-company-map__branches::before {
  content: "";

  position: absolute;

  top: 0;
  left: 25%;
  right: 25%;

  height: 1px;

  background:
    var(--co1-line-strong);
}


.co1-company-map__branches::after {
  content: "";

  position: absolute;

  top: 0;
  left: 25%;

  width: 50%;
  height: 42px;

  border-left:
    1px solid var(--co1-line-strong);

  border-right:
    1px solid var(--co1-line-strong);
}


.co1-branch {
  min-height: 480px;

  padding:
    clamp(30px, 4vw, 54px);

  display: flex;
  flex-direction: column;

  border:
    1px solid var(--co1-line);

  background:
    var(--co1-panel);
}


.co1-branch--product {
  border-color:
    rgba(102,141,117,.28);

  background:
    linear-gradient(
      145deg,
      rgba(102,141,117,.08),
      var(--co1-panel) 42%
    );
}


.co1-branch__index {
  color:
    var(--co1-muted-2);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}


.co1-branch h3 {
  margin:
    45px 0 0;

  font-size:
    clamp(30px, 3.5vw, 52px);

  line-height: 1;
  letter-spacing: -.045em;
}


.co1-branch > p {
  max-width: 560px;

  margin:
    18px 0 0;

  color:
    var(--co1-muted);

  line-height: 1.68;
}


.co1-product-signal {
  margin-top: auto;

  padding:
    20px 0;

  display: flex;
  gap: 16px;
  align-items: center;

  border-top:
    1px solid var(--co1-line);

  border-bottom:
    1px solid var(--co1-line);
}


.co1-product-signal__dot {
  width: 10px;
  height: 10px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--co1-green);

  box-shadow:
    0 0 0 6px rgba(102,141,117,.1);
}


.co1-product-signal div {
  display: grid;
  gap: 4px;
}


.co1-product-signal small {
  color:
    var(--co1-green);

  font-size: 7px;
  font-weight: 700;
  letter-spacing: .13em;
}


.co1-product-signal strong {
  font-size: 16px;
}


.co1-product-signal div > span {
  color:
    var(--co1-muted-2);

  font-size: 10px;
}


.co1-solution-stack {
  margin-top: auto;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--co1-line);

  border-left:
    1px solid var(--co1-line);
}


.co1-solution-stack span {
  min-height: 64px;

  padding: 15px;

  display: flex;
  align-items: center;

  border-right:
    1px solid var(--co1-line);

  border-bottom:
    1px solid var(--co1-line);

  color:
    var(--co1-muted);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .1em;
}


.co1-link {
  margin-top: 24px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  width: fit-content;

  color:
    var(--co1-text);

  text-decoration: none;

  font-size: 13px;
  font-weight: 650;
}


/* ============================================================
   PRINCIPLES
   ============================================================ */

.co1-principles {
  background:
    var(--co1-paper);

  color:
    var(--co1-paper-text);
}


.co1-principles .co1-kicker {
  color:
    #7b6435;
}


.co1-principles .co1-section-heading > p {
  color:
    rgba(24,26,29,.63);
}


.co1-principle-system {
  border-top:
    1px solid rgba(24,26,29,.14);
}


.co1-principle-system article {
  min-height: 150px;

  display: grid;

  grid-template-columns:
    70px
    minmax(0, 1fr)
    120px;

  gap:
    clamp(24px, 4vw, 60px);

  align-items: center;

  padding:
    30px 0;

  border-bottom:
    1px solid rgba(24,26,29,.14);
}


.co1-principle-system article > span {
  color:
    #8b7545;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
}


.co1-principle-system article div {
  max-width: 860px;
}


.co1-principle-system strong {
  font-size:
    clamp(22px, 2.3vw, 34px);

  letter-spacing: -.025em;
}


.co1-principle-system p {
  max-width: 680px;

  margin:
    8px 0 0;

  color:
    rgba(24,26,29,.62);

  line-height: 1.62;
}


.co1-principle-system small {
  justify-self: end;

  color:
    rgba(24,26,29,.35);

  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}


/* ============================================================
   DIRECTION
   ============================================================ */

.co1-direction {
  display: grid;

  grid-template-columns:
    minmax(0, .85fr)
    minmax(500px, 1.15fr);

  gap:
    clamp(60px, 10vw, 150px);

  align-items: center;

  min-height:
    720px;

  background:
    radial-gradient(
      circle at 84% 50%,
      rgba(200,170,103,.075),
      transparent 29%
    ),
    #090b0e;
}


.co1-direction__copy {
  max-width: 720px;
}


.co1-direction__copy > p {
  margin-top: 28px;
}


.co1-growth-system {
  padding:
    clamp(26px, 4vw, 48px);

  border:
    1px solid var(--co1-line);

  background:
    rgba(255,255,255,.018);
}


.co1-growth-system__track {
  display: grid;

  gap: 0;
}


.co1-growth-system__track article {
  min-height: 62px;

  padding:
    0 18px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border:
    1px solid var(--co1-line);

  background:
    rgba(255,255,255,.012);
}


.co1-growth-system__track article span {
  color:
    var(--co1-gold-soft);

  font-size: 8px;
}


.co1-growth-system__track article strong {
  font-size: 10px;
  letter-spacing: .11em;
}


.co1-growth-system__track > i {
  width: 1px;
  height: 18px;

  margin:
    0 auto;

  background:
    var(--co1-line-strong);
}


.co1-growth-system__future {
  margin-top: 48px;

  display: grid;

  grid-template-columns:
    auto 1fr
    auto 1fr
    auto;

  align-items: center;

  gap: 16px;
}


.co1-growth-system__future > div:not(.co1-growth-system__line) {
  display: grid;
  gap: 5px;
}


.co1-growth-system__future small {
  color:
    var(--co1-muted-2);

  font-size: 7px;
  letter-spacing: .13em;
}


.co1-growth-system__future strong {
  font-size: 11px;
}


.co1-growth-system__line {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--co1-line-strong),
      rgba(200,170,103,.35)
    );
}


.co1-growth-system__current strong {
  color:
    var(--co1-green);
}


.co1-growth-system__ecosystem strong {
  color:
    var(--co1-gold-soft);
}


/* ============================================================
   CONTACT
   ============================================================ */

.co1-contact {
  min-height:
    560px;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, .55fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items: end;

  background:
    linear-gradient(
      135deg,
      #0d1014,
      #090b0e 60%
    );
}


.co1-contact > div:first-child {
  max-width: 900px;
}


.co1-contact__side {
  align-self: end;
}


.co1-contact__side .button {
  margin-top: 28px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

  .co1-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, .8fr);
  }


  .co1-section-heading,
  .co1-direction,
  .co1-contact {
    grid-template-columns:
      1fr;

    gap: 42px;
  }


  .co1-radar {
    grid-template-columns:
      1fr;
  }


  .co1-radar__field {
    max-width: 520px;
  }


  .co1-direction {
    min-height: auto;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .co1-section {
    padding:
      76px 18px;
  }


  .co1-section-heading {
    margin-bottom: 48px;
  }


  .co1-section-heading h2,
  .co1-direction__copy h2,
  .co1-contact h2 {
    font-size:
      clamp(36px, 11vw, 52px);
  }


  .co1-hero {
    min-height: auto;

    padding-top: 128px;

    grid-template-columns:
      1fr;

    grid-template-rows:
      auto auto auto;

    gap: 52px;

    background-size:
      44px 44px;
  }


  .co1-hero h1 {
    font-size:
      clamp(46px, 14vw, 68px);
  }


  .co1-observer {
    width:
      min(100%, 430px);

    justify-self: center;
  }


  .co1-observer__core {
    width: 104px;
    height: 104px;
  }


  .co1-observer__core img {
    width: 42px;
    height: 42px;
  }


  .co1-process {
    grid-column: auto;

    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 1px;

    padding-top: 0;

    border:
      1px solid var(--co1-line);
  }


  .co1-process span {
    min-height: 66px;

    padding: 14px;

    justify-content: center;

    border:
      1px solid var(--co1-line);
  }


  .co1-process > i {
    display: none;
  }


  .co1-model-compare,
  .co1-company-map__branches {
    grid-template-columns:
      1fr;
  }


  .co1-model + .co1-model {
    border-left: 0;

    border-top:
      1px solid rgba(24,26,29,.14);
  }


  .co1-model__flow {
    grid-template-columns:
      1fr;

    gap: 9px;
  }


  .co1-model__flow i {
    transform: rotate(90deg);
  }


  .co1-radar {
    gap: 46px;
  }


  .co1-radar__field {
    max-width: 390px;
  }


  .co1-context-signals {
    grid-template-columns:
      1fr;
  }


  .co1-context-signals article,
  .co1-context-signals article:nth-child(even),
  .co1-context-signals article:last-child {
    grid-column: auto;

    border-right: 0;
  }


  .co1-company-map__branches {
    padding-top: 0;
  }


  .co1-company-map__branches::before,
  .co1-company-map__branches::after,
  .co1-company-map__stem {
    display: none;
  }


  .co1-branch {
    min-height: 430px;
  }


  .co1-principle-system article {
    grid-template-columns:
      42px minmax(0, 1fr);

    gap: 16px;

    align-items: start;
  }


  .co1-principle-system article > small {
    display: none;
  }


  .co1-growth-system {
    padding: 20px 14px;
  }


  .co1-growth-system__future {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .co1-growth-system__line {
    width: 1px;
    height: 20px;

    margin:
      0 auto;
  }


  .co1-growth-system__future > div:not(.co1-growth-system__line) {
    text-align: center;
  }


  .co1-contact {
    min-height: 500px;
  }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 430px) {

  .co1-observer__label {
    font-size: 7px;
  }


  .co1-observer__label--reality {
    right: 0;
  }


  .co1-observer__label--context {
    left: 0;
  }


  .co1-solution-stack {
    grid-template-columns:
      1fr;
  }

}


/* ============================================================
   P36-C MOTION CONTRACT
   Motion is intentionally deferred to P36-E.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .co1-page *,
  .co1-page *::before,
  .co1-page *::after {
    scroll-behavior: auto !important;
  }

}
/* ============================================================
   KVA STUDIOS
   P36-D COMPANY VISUAL + RESPONSIVE REFINEMENT

   Static refinement only.
   Motion remains deferred to P36-E.
   ============================================================ */


/* ============================================================
   GLOBAL DEPTH / SECTION RHYTHM
   ============================================================ */

.co1-page {
  background:
    radial-gradient(
      circle at 82% 5%,
      rgba(125, 150, 168, .1),
      transparent 25%
    ),
    radial-gradient(
      circle at 15% 31%,
      rgba(200, 170, 103, .035),
      transparent 24%
    ),
    var(--co1-bg);
}


.co1-section-heading {
  position: relative;
}


.co1-section-heading::after {
  content: "";

  position: absolute;

  left: 0;
  bottom:
    clamp(-28px, -2.5vw, -18px);

  width:
    clamp(52px, 5vw, 82px);

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--co1-gold),
      transparent
    );
}


/* ============================================================
   HERO / OBSERVATION SYSTEM
   ============================================================ */

.co1-hero {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(420px, .82fr);

  background:
    linear-gradient(
      rgba(255,255,255,.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.028) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 73% 42%,
      rgba(200,170,103,.055),
      transparent 24%
    );

  background-size:
    72px 72px,
    72px 72px,
    auto;
}


.co1-hero::after {
  content: "";

  position: absolute;

  right: 0;
  top: 18%;

  width: 34%;
  height: 48%;

  pointer-events: none;

  border-top:
    1px solid rgba(200,170,103,.055);

  border-bottom:
    1px solid rgba(125,150,168,.055);

  opacity: .85;
}


.co1-hero__copy {
  text-shadow:
    0 1px 22px rgba(0,0,0,.16);
}


.co1-observer {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(200,170,103,.07),
      rgba(9,11,14,.88) 32%,
      rgba(7,9,12,.7) 61%,
      rgba(7,9,12,.82)
    );

  box-shadow:
    inset 0 0 90px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.018),
    0 28px 80px rgba(0,0,0,.24);
}


.co1-observer::before {
  content: "";

  position: absolute;

  inset: -15px;

  border:
    1px solid rgba(255,255,255,.035);

  border-radius: 50%;

  pointer-events: none;
}


.co1-observer__orbit--outer {
  border-color:
    rgba(200,170,103,.34);
}


.co1-observer__orbit--inner {
  border-color:
    rgba(125,150,168,.34);
}


.co1-observer__core {
  border-color:
    rgba(200,170,103,.52);

  box-shadow:
    0 0 0 8px rgba(200,170,103,.025),
    0 0 72px rgba(200,170,103,.13);
}


.co1-observer__label {
  box-shadow:
    0 8px 30px rgba(0,0,0,.22);
}


/* ============================================================
   PURPOSE / MODEL CONTRAST
   ============================================================ */

.co1-purpose {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.1),
      transparent 38%
    ),
    var(--co1-paper);
}


.co1-model-compare {
  box-shadow:
    0 28px 70px rgba(23,26,30,.08);
}


.co1-model--generic {
  background:
    linear-gradient(
      145deg,
      rgba(24,26,29,.055),
      rgba(24,26,29,.015)
    );
}


.co1-model--kva {
  position: relative;

  background:
    radial-gradient(
      circle at 84% 20%,
      rgba(200,170,103,.085),
      transparent 34%
    ),
    #171a1e;

  box-shadow:
    inset 3px 0 0 rgba(200,170,103,.5);
}


.co1-model--kva::after {
  content: "KVA SIGNAL";

  position: absolute;

  right: 22px;
  bottom: 20px;

  color:
    rgba(200,170,103,.33);

  font-size: 7px;
  font-weight: 700;
  letter-spacing: .16em;
}


/* ============================================================
   CONTEXT RADAR
   ============================================================ */

.co1-understanding {
  background:
    radial-gradient(
      circle at 26% 52%,
      rgba(125,150,168,.07),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #090b0e,
      #0c1014
    );
}


.co1-radar__field {
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(200,170,103,.055) 0,
      rgba(125,150,168,.022) 31%,
      transparent 67%
    );

  box-shadow:
    inset 0 0 100px rgba(125,150,168,.025);
}


.co1-radar__ring--1 {
  border-color:
    rgba(125,150,168,.18);

  box-shadow:
    0 0 70px rgba(125,150,168,.025);
}


.co1-radar__ring--2 {
  border-color:
    rgba(255,255,255,.115);
}


.co1-radar__ring--3 {
  border-color:
    rgba(200,170,103,.42);

  box-shadow:
    0 0 46px rgba(200,170,103,.045);
}


.co1-radar__core {
  border-color:
    rgba(200,170,103,.44);

  box-shadow:
    0 0 0 8px rgba(200,170,103,.02),
    0 20px 55px rgba(0,0,0,.22);
}


.co1-context-signals article {
  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      transparent 62%
    );
}


.co1-context-signals article::after {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 34px;
  height: 1px;

  background:
    rgba(200,170,103,.32);
}


/* ============================================================
   COMPANY ARCHITECTURE
   ============================================================ */

.co1-architecture {
  background:
    radial-gradient(
      circle at 50% 34%,
      rgba(200,170,103,.045),
      transparent 25%
    ),
    #0a0d11;
}


.co1-company-map__root {
  position: relative;

  border-color:
    rgba(200,170,103,.38);

  box-shadow:
    0 18px 52px rgba(0,0,0,.18),
    inset 0 0 32px rgba(200,170,103,.028);
}


.co1-company-map__root::after {
  content: "";

  position: absolute;

  inset: 6px;

  pointer-events: none;

  border:
    1px solid rgba(200,170,103,.07);
}


.co1-company-map__stem,
.co1-company-map__branches::before,
.co1-company-map__branches::after {
  opacity: .9;
}


.co1-branch {
  box-shadow:
    0 24px 64px rgba(0,0,0,.12);
}


.co1-branch--product {
  border-color:
    rgba(102,141,117,.38);

  background:
    radial-gradient(
      circle at 15% 85%,
      rgba(102,141,117,.1),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(102,141,117,.07),
      var(--co1-panel) 43%
    );
}


.co1-branch--solutions {
  border-color:
    rgba(125,150,168,.29);

  background:
    radial-gradient(
      circle at 87% 18%,
      rgba(125,150,168,.09),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(125,150,168,.035),
      var(--co1-panel) 46%
    );
}


.co1-branch--product .co1-branch__index {
  color:
    rgba(102,141,117,.82);
}


.co1-branch--solutions .co1-branch__index {
  color:
    rgba(125,150,168,.83);
}


/* ============================================================
   PRINCIPLES
   ============================================================ */

.co1-principles {
  background:
    linear-gradient(
      90deg,
      rgba(24,26,29,.022) 1px,
      transparent 1px
    ),
    var(--co1-paper);

  background-size:
    72px 100%;
}


.co1-principle-system article {
  position: relative;
}


.co1-principle-system article::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 0;
  height: 1px;

  background:
    #8b7545;
}


.co1-principle-system article > span {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  border:
    1px solid rgba(123,100,53,.2);

  border-radius: 50%;
}


/* ============================================================
   DIRECTION / GROWTH SYSTEM
   ============================================================ */

.co1-direction {
  min-height: auto;

  padding-top:
    clamp(86px, 7vw, 112px);

  padding-bottom:
    clamp(70px, 5vw, 88px);

  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(200,170,103,.09),
      transparent 30%
    ),
    radial-gradient(
      circle at 97% 7%,
      rgba(125,150,168,.045),
      transparent 24%
    ),
    #090b0e;
}


.co1-growth-system {
  position: relative;

  border-color:
    rgba(200,170,103,.14);

  background:
    linear-gradient(
      145deg,
      rgba(200,170,103,.025),
      rgba(255,255,255,.016)
    );

  box-shadow:
    inset 0 0 60px rgba(200,170,103,.018),
    0 28px 72px rgba(0,0,0,.17);
}


.co1-growth-system::before {
  content: "PRODUCT LEARNING LOOP";

  position: absolute;

  top: 14px;
  right: 16px;

  color:
    rgba(200,170,103,.26);

  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
}


.co1-growth-system__track article {
  min-height: 70px;

  border-color:
    rgba(255,255,255,.12);
}


.co1-growth-system__track article:last-of-type {
  border-color:
    rgba(200,170,103,.29);

  background:
    rgba(200,170,103,.03);
}


.co1-growth-system__future {
  padding-top: 26px;

  border-top:
    1px solid rgba(255,255,255,.07);
}


/* ============================================================
   CONTACT / REMOVE DEAD SPACE
   ============================================================ */

.co1-contact {
  min-height: 500px;

  padding-top:
    clamp(68px, 5vw, 88px);

  padding-bottom:
    clamp(76px, 6vw, 100px);

  border-top-color:
    rgba(200,170,103,.15);

  background:
    radial-gradient(
      circle at 83% 55%,
      rgba(200,170,103,.07),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      #0d1014,
      #090b0e 61%
    );
}


.co1-contact::before {
  content: "";

  position: absolute;

  top: 0;
  left:
    clamp(22px, 5vw, 76px);

  width:
    clamp(50px, 5vw, 84px);

  height: 1px;

  background:
    var(--co1-gold);
}


.co1-contact__side {
  max-width: 470px;
}


/* ============================================================
   TABLET REFINEMENT
   ============================================================ */

@media (max-width: 1100px) {

  .co1-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(350px, .78fr);
  }


  .co1-direction {
    padding-top: 86px;
    padding-bottom: 78px;
  }


  .co1-contact {
    padding-top: 74px;
  }

}


/* ============================================================
   MOBILE REFINEMENT
   ============================================================ */

@media (max-width: 760px) {

  .co1-section-heading::after {
    bottom: -18px;
  }


  .co1-hero {
    grid-template-columns:
      1fr;

    gap: 44px;

    padding-bottom: 72px;

    background-size:
      44px 44px,
      44px 44px,
      auto;
  }


  .co1-hero::after {
    display: none;
  }


  .co1-hero__meta {
    gap: 9px;
  }


  .co1-observer {
    width:
      min(92vw, 390px);
  }


  .co1-observer::before {
    inset: -8px;
  }


  .co1-model {
    min-height: auto;

    padding-bottom: 38px;
  }


  .co1-model__flow {
    min-height: 220px;

    padding:
      28px 0;
  }


  .co1-model--kva {
    box-shadow:
      inset 0 3px 0 rgba(200,170,103,.48);
  }


  .co1-model--kva::after {
    right: 18px;
    bottom: 15px;
  }


  .co1-radar__field {
    width:
      min(90vw, 380px);
  }


  .co1-context-signals article {
    min-height: 145px;

    padding:
      22px 18px 25px;
  }


  .co1-company-map__root {
    width: 100%;

    justify-content: center;
  }


  .co1-branch {
    min-height: auto;

    padding-bottom: 34px;
  }


  .co1-product-signal,
  .co1-solution-stack {
    margin-top: 44px;
  }


  .co1-principle-system article {
    min-height: 0;

    padding:
      25px 0;
  }


  .co1-principle-system article > span {
    width: 30px;
    height: 30px;
  }


  .co1-direction {
    padding-top: 74px;
    padding-bottom: 68px;
  }


  .co1-growth-system::before {
    position: static;

    display: block;

    margin:
      0 0 18px;

    text-align: right;
  }


  .co1-growth-system__track article {
    min-height: 64px;
  }


  .co1-growth-system__future {
    padding-top: 22px;
  }


  .co1-contact {
    min-height: auto;

    padding-top: 68px;
    padding-bottom: 76px;

    gap: 34px;
  }


  .co1-contact__side {
    max-width: none;
  }

}


/* ============================================================
   SMALL MOBILE REFINEMENT
   ============================================================ */

@media (max-width: 430px) {

  .co1-observer {
    width:
      min(88vw, 350px);
  }


  .co1-observer__core {
    width: 96px;
    height: 96px;
  }


  .co1-observer__label {
    padding: 5px 6px;

    letter-spacing: .09em;
  }


  .co1-radar__field {
    width:
      min(88vw, 350px);
  }


  .co1-radar__core {
    width: 134px;
    height: 134px;
  }


  .co1-context-signals article {
    min-height: 132px;
  }


  .co1-growth-system__track article {
    padding:
      0 14px;
  }

}


/* ============================================================
   P36-D MOTION CONTRACT

   No animation is introduced here.
   P36-E owns motion and interaction.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .co1-page *,
  .co1-page *::before,
  .co1-page *::after {
    scroll-behavior:
      auto !important;
  }

}
/* ============================================================
   KVA STUDIOS
   P36-E COMPANY MOTION + INTERACTION
   ============================================================ */


/* ============================================================
   REVEAL SYSTEM
   ============================================================ */

html.co1-motion-ready .co1-reveal {
  opacity: 0;

  transform:
    translate3d(0, 28px, 0);

  transition:
    opacity .72s cubic-bezier(.2,.72,.2,1),
    transform .84s cubic-bezier(.2,.72,.2,1);
}


html.co1-motion-ready .co1-reveal[data-co1-reveal="left"] {
  transform:
    translate3d(-24px, 0, 0);
}


html.co1-motion-ready .co1-reveal[data-co1-reveal="right"] {
  transform:
    translate3d(24px, 0, 0);
}


html.co1-motion-ready .co1-reveal.co1-in-view {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


html.co1-motion-ready .co1-reveal[data-co1-delay="1"] {
  transition-delay: .07s;
}


html.co1-motion-ready .co1-reveal[data-co1-delay="2"] {
  transition-delay: .14s;
}


html.co1-motion-ready .co1-reveal[data-co1-delay="3"] {
  transition-delay: .21s;
}


html.co1-motion-ready .co1-reveal[data-co1-delay="4"] {
  transition-delay: .28s;
}


/* ============================================================
   HERO SIGNAL
   ============================================================ */

.co1-observer {
  --co1-tilt-x: 0deg;
  --co1-tilt-y: 0deg;

  transform:
    perspective(900px)
    rotateX(var(--co1-tilt-x))
    rotateY(var(--co1-tilt-y));

  transform-style:
    preserve-3d;

  transition:
    transform .28s ease-out;
}


.co1-observer__orbit--outer {
  animation:
    co1-orbit-forward 28s linear infinite;
}


.co1-observer__orbit--inner {
  animation:
    co1-orbit-reverse 20s linear infinite;
}


.co1-observer__core {
  animation:
    co1-core-breathe 5.8s ease-in-out infinite;
}


.co1-observer__node {
  animation:
    co1-node-signal 3.2s ease-in-out infinite;
}


.co1-observer__node--b {
  animation-delay: -1.1s;
}


.co1-observer__node--c {
  animation-delay: -2.2s;
}


@keyframes co1-orbit-forward {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes co1-orbit-reverse {

  to {
    transform:
      rotate(-360deg);
  }

}


@keyframes co1-core-breathe {

  0%,
  100% {
    box-shadow:
      0 0 0 8px rgba(200,170,103,.025),
      0 0 62px rgba(200,170,103,.09);
  }

  50% {
    box-shadow:
      0 0 0 12px rgba(200,170,103,.035),
      0 0 88px rgba(200,170,103,.16);
  }

}


@keyframes co1-node-signal {

  0%,
  100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }

}


/* ============================================================
   RADAR SIGNAL
   ============================================================ */

.co1-radar__field {
  overflow: hidden;
}


.co1-radar__field::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 45%;
  height: 1px;

  transform-origin:
    left center;

  background:
    linear-gradient(
      90deg,
      rgba(200,170,103,.6),
      rgba(200,170,103,.08),
      transparent
    );

  box-shadow:
    0 0 14px rgba(200,170,103,.08);

  animation:
    co1-radar-sweep 8.5s linear infinite;

  pointer-events: none;
}


.co1-radar__ring--3 {
  animation:
    co1-radar-pulse 4.5s ease-in-out infinite;
}


@keyframes co1-radar-sweep {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes co1-radar-pulse {

  0%,
  100% {
    opacity: .72;
  }

  50% {
    opacity: 1;
  }

}


/* ============================================================
   PRODUCT / SYSTEM SIGNALS
   ============================================================ */

.co1-product-signal__dot {
  animation:
    co1-product-pulse 3s ease-in-out infinite;
}


@keyframes co1-product-pulse {

  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(102,141,117,.08);
  }

  50% {
    box-shadow:
      0 0 0 10px rgba(102,141,117,.025);
  }

}


/* ============================================================
   INTERACTION / HOVER
   ============================================================ */

.co1-model,
.co1-context-signals article,
.co1-branch,
.co1-principle-system article,
.co1-growth-system__track article {
  transition:
    border-color .28s ease,
    background-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}


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

  .co1-model:hover {
    transform:
      translateY(-3px);
  }


  .co1-context-signals article:hover {
    background:
      linear-gradient(
        145deg,
        rgba(200,170,103,.035),
        rgba(255,255,255,.016)
      );
  }


  .co1-branch:hover {
    transform:
      translateY(-5px);

    box-shadow:
      0 34px 80px rgba(0,0,0,.2);
  }


  .co1-branch--product:hover {
    border-color:
      rgba(102,141,117,.55);
  }


  .co1-branch--solutions:hover {
    border-color:
      rgba(125,150,168,.48);
  }


  .co1-principle-system article:hover::before {
    width: 100%;
  }


  .co1-principle-system article:hover {
    padding-left: 10px;
  }


  .co1-growth-system__track article:hover {
    border-color:
      rgba(200,170,103,.28);

    background:
      rgba(200,170,103,.035);
  }


  .co1-link span {
    transition:
      transform .22s ease;
  }


  .co1-link:hover span {
    transform:
      translate(2px, -2px);
  }

}


/* ============================================================
   GROWTH FLOW
   ============================================================ */

.co1-growth-system__track > i {
  position: relative;

  overflow: hidden;
}


.co1-growth-system__track > i::after {
  content: "";

  position: absolute;

  inset:
    -100% 0 auto;

  height: 100%;

  background:
    var(--co1-gold);

  animation:
    co1-flow-down 2.7s ease-in-out infinite;
}


.co1-growth-system__track > i:nth-of-type(2)::after {
  animation-delay: -.5s;
}


.co1-growth-system__track > i:nth-of-type(3)::after {
  animation-delay: -1s;
}


.co1-growth-system__track > i:nth-of-type(4)::after {
  animation-delay: -1.5s;
}


@keyframes co1-flow-down {

  0% {
    transform:
      translateY(-100%);

    opacity: 0;
  }

  35% {
    opacity: .9;
  }

  100% {
    transform:
      translateY(200%);

    opacity: 0;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

html.co1-reduced-motion .co1-reveal,
html.co1-reduced-motion .co1-reveal.co1-in-view {
  opacity: 1 !important;

  transform:
    none !important;

  transition:
    none !important;
}


html.co1-reduced-motion .co1-observer {
  transform:
    none !important;

  transition:
    none !important;
}


html.co1-reduced-motion .co1-observer__orbit,
html.co1-reduced-motion .co1-observer__core,
html.co1-reduced-motion .co1-observer__node,
html.co1-reduced-motion .co1-radar__field::after,
html.co1-reduced-motion .co1-radar__ring--3,
html.co1-reduced-motion .co1-product-signal__dot,
html.co1-reduced-motion .co1-growth-system__track > i::after {
  animation:
    none !important;
}


@media (prefers-reduced-motion: reduce) {

  .co1-page *,
  .co1-page *::before,
  .co1-page *::after {
    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

    scroll-behavior:
      auto !important;
  }


  .co1-reveal {
    opacity:
      1 !important;

    transform:
      none !important;
  }

}
/* KVA P40-B — CSP-safe Company brand fallback */
.site-header .brand-symbol.kva-brand-fallback-active > img {
  display: none;
}

.site-header .brand-symbol.kva-brand-fallback-active > .brand-fallback {
  display: grid;
}


/* =========================================================
   KVA P42-B2 COMPANY MOBILE RHYTHM CANDIDATE
   Local visual candidate - P42
   ========================================================= */

@media (max-width: 760px) {
  html.co1-motion-ready .co1-reveal,
  html.co1-motion-ready .co1-reveal[data-co1-reveal="left"],
  html.co1-motion-ready .co1-reveal[data-co1-reveal="right"] {
    opacity: 0.3;
    transform: translate3d(0, 12px, 0);
    transition:
      opacity 520ms cubic-bezier(.2,.72,.2,1),
      transform 620ms cubic-bezier(.2,.72,.2,1);
  }

  html.co1-motion-ready .co1-reveal.co1-in-view,
  html.co1-motion-ready .co1-reveal[data-co1-reveal="left"].co1-in-view,
  html.co1-motion-ready .co1-reveal[data-co1-reveal="right"].co1-in-view {
    opacity: 1;
    transform: none;
  }

  .co1-contact {
    min-height: auto;
    padding-top: clamp(64px, 12vw, 82px);
    padding-bottom: clamp(72px, 14vw, 94px);
  }
}

/* ============================================================
   KVA STUDIOS
   P42-F3 COMPANY REAL TRUST SIGNALS
   Public facts only: Hospitality / Costa Rica / Privacy.
   ============================================================ */

.co1-trust-signals {
  margin-top: 34px;

  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border:
    1px solid var(--co1-line);

  background:
    rgba(255,255,255,.014);
}


.co1-trust-signal {
  position: relative;

  min-width: 0;
  min-height: 92px;

  padding:
    18px 20px;

  display: grid;
  align-content: center;
  gap: 7px;

  border-right:
    1px solid var(--co1-line);

  color:
    var(--co1-text);

  text-decoration: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      transparent 68%
    );
}


.co1-trust-signal:last-child {
  border-right: 0;
}


.co1-trust-signal small {
  color:
    var(--co1-muted-2);

  font-size: 7px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
}


.co1-trust-signal strong {
  min-width: 0;

  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
}


.co1-trust-signal--hospitality strong {
  color:
    var(--co1-green);
}


.co1-trust-signal--privacy strong {
  color:
    var(--co1-gold-soft);
}


a.co1-trust-signal {
  transition:
    background .22s ease,
    border-color .22s ease;
}


a.co1-trust-signal:focus-visible {
  z-index: 2;

  outline:
    2px solid var(--co1-gold);

  outline-offset:
    -4px;
}


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

  a.co1-trust-signal:hover {
    background:
      rgba(200,170,103,.04);
  }

}


@media (max-width: 760px) {

  .co1-trust-signals {
    margin-top: 28px;

    grid-template-columns:
      1fr;
  }


  .co1-trust-signal {
    min-height: 78px;

    border-right: 0;
    border-bottom:
      1px solid var(--co1-line);
  }


  .co1-trust-signal:last-child {
    border-bottom: 0;
  }

}


@media (prefers-reduced-motion: reduce) {

  a.co1-trust-signal {
    transition:
      none !important;
  }

}