:root{
  --bg:#010812;
  --panel:#06131f;
  --panel-2:#081824;

  --gold:#dba441;
  --gold-light:#f0c764;

  --blue:#4aaeff;
  --purple:#a973ff;
  --green:#6ed98a;
  --teal:#24d4c1;

  --text:#f3f1ed;
  --muted:#b9bdc2;

  --line:#293f50;

  --page-max:1536px;
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  margin:0;

  min-height:100vh;

  color:var(--text);

  background:
    radial-gradient(
      circle at 69% 20%,
      rgba(18,76,126,.14),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #010812,
      #020b14
    );

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;
}


/* ============================================================
   HEADER
   ============================================================ */

.ot-home-header{
  position:relative;
  z-index:30;

  width:100%;
  min-height:92px;

  display:grid;

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

  align-items:center;

  gap:18px;

  padding:
    7px
    clamp(22px,3vw,48px);

  background:
    rgba(1,8,18,.96);
}


.ot-home-logo{
  width:245px;
  height:76px;

  display:block;
}


.ot-home-logo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:left center;
}


.ot-home-nav{
  display:flex;

  justify-content:center;
  align-items:center;

  gap:
    clamp(18px,2.4vw,44px);
}


.ot-home-nav a{
  position:relative;

  padding:
    13px
    0;

  color:#e6e3de;

  text-decoration:none;

  text-transform:uppercase;

  font-size:12px;
  font-weight:650;

  letter-spacing:.035em;
}


.ot-home-nav a:hover,
.ot-home-nav a.active{
  color:var(--gold-light);
}


.ot-home-nav a.active::after{
  content:"";

  position:absolute;

  left:-12px;
  right:-12px;
  bottom:0;

  height:2px;

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


.ot-header-actions{
  display:flex;

  align-items:center;
  justify-content:flex-end;

  gap:13px;
}


.ot-server-status{
  display:flex;

  align-items:center;

  gap:6px;

  margin-right:2px;

  color:#a0abb5;

  font-size:10px;

  white-space:nowrap;
}


.ot-server-status strong{
  color:#8897a3;
}


.ot-server-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#64717c;
}


.ot-server-dot.online{
  background:var(--teal);

  box-shadow:
    0 0 10px
    rgba(36,212,193,.55);
}


.ot-server-dot.offline{
  background:#df5959;
}


#server-text{
  color:var(--teal);
}


.ot-top-button{
  min-width:125px;
  height:55px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  border-radius:8px;

  text-decoration:none;

  text-transform:uppercase;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

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


.ot-login-button{
  color:#f1ede7;

  background:
    rgba(2,13,23,.7);

  border:
    1px solid
    #456477;
}


.ot-signup-button{
  color:#090909;

  background:
    linear-gradient(
      180deg,
      #edbf58,
      #c5892f
    );

  border:
    1px solid
    #efc35d;

  box-shadow:
    0 8px 24px
    rgba(219,164,65,.13);
}


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

.ot-hero{
  position:relative;

  width:100%;
  max-width:var(--page-max);

  height:625px;

  margin:0 auto;

  overflow:hidden;
}


.ot-hero-copy{
  position:absolute;

  z-index:10;

  left:
    clamp(30px,3.3vw,52px);

  top:100px;

  width:
    min(510px,42vw);
}


.ot-hero-copy h1{
  margin:0;

  color:var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(43px,4vw,61px);

  font-weight:500;

  line-height:1.12;

  letter-spacing:-.025em;

  text-transform:uppercase;

  text-shadow:
    0 1px 0
    rgba(255,238,176,.7),
    0 0 19px
    rgba(220,163,61,.12);
}


.ot-hero-copy h1 span{
  color:#e6b457;
}


.ot-hero-description{
  max-width:430px;

  margin:
    27px
    0
    0;

  color:#c9c5bf;

  font-size:17px;

  line-height:1.7;
}


.ot-hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:23px;

  margin-top:31px;
}


.ot-hero-button{
  min-width:210px;
  height:58px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:16px;

  border-radius:8px;

  text-decoration:none;

  text-transform:uppercase;

  font-size:13px;
  font-weight:800;

  letter-spacing:.02em;
}


.ot-primary-button{
  color:#090909;

  background:
    linear-gradient(
      180deg,
      #efc362,
      #be8028
    );

  border:
    1px solid
    #f1ca68;

  box-shadow:
    0 0 28px
    rgba(220,161,52,.26);
}


.ot-primary-button span{
  font-size:25px;

  font-weight:400;
}


.ot-secondary-button{
  color:#f0eeee;

  background:
    rgba(2,15,27,.74);

  border:
    1px solid
    #4c6d84;
}


.ot-community-line{
  margin-top:24px;

  color:#d2cfca;

  font-size:14px;
}


.ot-community-line span{
  margin-right:9px;

  color:var(--gold);

  font-size:20px;
}


/* Full hero image.
   IMPORTANT:
   contain = entire tortoise remains visible.
*/

.ot-hero-art{
  position:absolute;

  z-index:1;

  top:0;
  right:0;

  width:67%;
  height:100%;

  display:flex;

  align-items:center;
  justify-content:flex-end;

  overflow:hidden;
}


.ot-hero-art img{
  width:100%;
  height:100%;

  display:block;

  object-fit:contain;

  object-position:
    right center;

  filter:
    saturate(1.04)
    contrast(1.03)
    brightness(.98);

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.15) 7%,
      rgba(0,0,0,.68) 19%,
      black 34%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.15) 7%,
      rgba(0,0,0,.68) 19%,
      black 34%
    );
}


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

  position:absolute;

  z-index:6;

  left:0;
  right:0;
  bottom:0;

  height:105px;

  pointer-events:none;

  background:
    linear-gradient(
      transparent,
      #010812
    );
}


/* ============================================================
   MISSION + LIVE TRUTH STATS
   ============================================================ */

.ot-mission-strip{
  position:relative;

  z-index:15;

  width:
    calc(100% - 96px);

  max-width:
    calc(var(--page-max) - 96px);

  min-height:126px;

  margin:
    -10px
    auto
    0;

  display:grid;

  grid-template-columns:
    135px
    235px
    minmax(285px,1fr)
    175px
    175px
    175px;

  align-items:center;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(8,20,31,.98),
      rgba(4,13,22,.99)
    );

  border:
    1px solid
    rgba(190,134,42,.74);

  border-radius:14px;

  box-shadow:
    0 8px 28px
    rgba(0,0,0,.33);
}


.ot-mission-strip > div{
  min-height:74px;

  padding:
    9px
    20px;

  display:flex;

  flex-direction:column;

  justify-content:center;
}


.ot-mission-strip > div + div{
  border-left:
    1px solid
    rgba(119,96,51,.48);
}


.ot-mission-shield{
  align-items:center;
}


.ot-shield-mark{
  width:67px;
  height:74px;

  display:flex;

  align-items:center;
  justify-content:center;

  color:var(--gold-light);

  border:
    2px solid
    #c18b34;

  border-radius:
    8px
    8px
    25px
    25px;

  font-size:35px;

  box-shadow:
    inset 0 0 20px
    rgba(220,164,63,.11),
    0 0 18px
    rgba(220,164,63,.12);
}


.ot-mission-heading h2{
  margin:
    0
    0
    8px;

  color:var(--gold);

  font-family:
    Georgia,
    serif;

  font-size:18px;

  text-transform:uppercase;
}


.ot-mission-heading strong{
  font-size:15px;

  line-height:1.5;
}


.ot-mission-copy{
  color:#d0cbc5;

  font-size:14px;

  line-height:1.65;
}


.ot-live-stat{
  align-items:center;

  text-align:center;
}


.ot-stat-icon{
  margin-bottom:3px;

  color:var(--gold);

  font-size:27px;
}


.ot-live-stat strong{
  font-size:20px;
}


.ot-live-stat small{
  margin-top:4px;

  color:#b7b7b7;

  font-size:10px;
}


/* ============================================================
   FEATURE CARDS
   ============================================================ */

.ot-features{
  width:
    calc(100% - 96px);

  max-width:
    calc(var(--page-max) - 96px);

  margin:
    23px
    auto
    0;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:20px;
}


.ot-feature-card{
  min-height:205px;

  padding:
    28px
    24px;

  display:grid;

  grid-template-columns:
    70px
    1fr;

  gap:18px;

  background:
    linear-gradient(
      145deg,
      #071420,
      #030d17
    );

  border:
    1px solid
    #2c4557;

  border-radius:13px;
}


.ot-feature-icon{
  width:64px;
  height:64px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  font-size:35px;
}


.ot-chat-icon{
  color:#61b7ff;

  box-shadow:
    inset 0 0 25px
    rgba(58,145,230,.15);
}


.ot-forum-icon{
  color:#aa74ff;

  box-shadow:
    inset 0 0 25px
    rgba(149,87,223,.15);
}


.ot-protect-icon{
  color:#70db89;

  box-shadow:
    inset 0 0 25px
    rgba(57,193,89,.15);
}


.ot-future-icon{
  color:#62adf5;

  box-shadow:
    inset 0 0 25px
    rgba(52,139,225,.14);
}


.ot-feature-card h3{
  margin:
    2px
    0
    11px;

  font-family:
    Georgia,
    serif;

  font-size:17px;

  text-transform:uppercase;

  letter-spacing:.03em;
}


.ot-feature-card p{
  margin:0;

  color:#cac6c0;

  font-size:13px;

  line-height:1.65;
}


.ot-feature-card a,
.ot-coming-soon{
  display:inline-block;

  margin-top:19px;

  color:#3aa8f7;

  text-decoration:none;

  text-transform:uppercase;

  font-size:10px;
  font-weight:800;
}


.ot-coming-soon{
  color:#a475e3;
}


/* ============================================================
   BOTTOM
   ============================================================ */

.ot-future-message{
  padding:
    31px
    20px
    35px;

  text-align:center;
}


.ot-future-message h2{
  margin:0;

  color:var(--gold-light);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(18px,2vw,23px);

  font-weight:500;

  text-transform:uppercase;

  letter-spacing:.19em;
}


.ot-future-rule{
  max-width:890px;

  margin:
    16px
    auto
    0;

  display:grid;

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

  align-items:center;

  gap:16px;

  color:var(--gold);
}


.ot-future-rule span{
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #b57a27
    );
}


.ot-future-rule span:last-child{
  background:
    linear-gradient(
      90deg,
      #b57a27,
      transparent
    );
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1280px){

  .ot-server-status{
    display:none;
  }

  .ot-home-nav{
    gap:23px;
  }

  .ot-hero-art{
    width:64%;
  }

  .ot-mission-strip{
    grid-template-columns:
      110px
      205px
      minmax(230px,1fr)
      repeat(3,145px);
  }

}


@media(max-width:1000px){

  .ot-home-header{
    grid-template-columns:
      1fr
      auto;

    padding:
      7px
      20px;
  }


  .ot-home-nav{
    grid-column:
      1 / -1;

    order:3;

    justify-content:flex-start;

    overflow-x:auto;

    padding-bottom:8px;
  }


  .ot-header-actions{
    justify-self:end;
  }


  .ot-hero{
    height:auto;

    display:flex;

    flex-direction:column;
  }


  .ot-hero-copy{
    position:relative;

    left:auto;
    top:auto;

    width:auto;

    padding:
      55px
      30px
      20px;

    text-align:center;
  }


  .ot-hero-description{
    margin-left:auto;
    margin-right:auto;
  }


  .ot-hero-actions{
    justify-content:center;
  }


  .ot-hero-art{
    position:relative;

    width:100%;
    height:500px;
  }


  .ot-hero-art img{
    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;

    -webkit-mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        180deg,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
      );
  }


  .ot-mission-strip{
    width:
      calc(100% - 34px);

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


  .ot-mission-strip > div + div{
    border-left:0;

    border-top:
      1px solid
      rgba(119,96,51,.32);
  }


  .ot-features{
    width:
      calc(100% - 34px);

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

}


@media(max-width:640px){

  .ot-home-logo{
    width:180px;
    height:59px;
  }


  .ot-header-actions{
    grid-column:
      1 / -1;

    width:100%;
  }


  .ot-top-button{
    flex:1;

    min-width:0;

    height:45px;
  }


  .ot-hero-copy{
    padding:
      42px
      20px
      15px;
  }


  .ot-hero-copy h1{
    font-size:39px;
  }


  .ot-hero-actions{
    flex-direction:column;
  }


  .ot-hero-button{
    width:100%;
  }


  .ot-hero-art{
    height:390px;
  }


  .ot-mission-strip{
    grid-template-columns:1fr;
  }


  .ot-features{
    grid-template-columns:1fr;
  }

}


/* ============================================================
   ORIGIN TORTOISE HERO FILL ? FOUNDER VISUAL MATCH
   Fill the full right side and blend into the left copy.
   ============================================================ */

.ot-hero{
    max-width:none !important;
    width:100% !important;
}

.ot-hero-art{
    position:absolute !important;
    top:0 !important;
    right:0 !important;

    width:64% !important;
    height:100% !important;

    overflow:hidden !important;

    display:block !important;
}

.ot-hero-art img{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /* Keep the tortoise head / Earth shell as the focus. */
    object-position:center 46% !important;

    filter:
        saturate(1.04)
        contrast(1.03)
        brightness(.98) !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.28) 8%,
            rgba(0,0,0,.82) 20%,
            black 31%
        ) !important;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.28) 8%,
            rgba(0,0,0,.82) 20%,
            black 31%
        ) !important;
}

/* Extra blend so there is no obvious rectangular image edge. */
.ot-hero-art::before{
    content:"";

    position:absolute;

    z-index:2;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            #010812 0%,
            rgba(1,8,18,.80) 9%,
            rgba(1,8,18,.28) 20%,
            transparent 34%
        );
}

.ot-hero-copy{
    z-index:10 !important;
}

/* Keep responsive layouts working as before. */
@media(max-width:1000px){

    .ot-hero-art{
        position:relative !important;

        width:100% !important;
        height:500px !important;
    }

    .ot-hero-art img{
        object-fit:contain !important;
        object-position:center !important;
    }

    .ot-hero-art::before{
        background:
            linear-gradient(
                180deg,
                #010812 0%,
                transparent 18%,
                transparent 80%,
                #010812 100%
            );
    }
}



/* ============================================================
   ORIGIN TORTOISE FINAL REFERENCE GEOMETRY V1
   Match Founder-approved homepage composition.
   ============================================================ */


/* ----- HEADER: use the real browser width ----- */

.ot-home-header{
    width:100% !important;

    grid-template-columns:
        260px
        1fr
        auto !important;

    padding:
        7px
        20px !important;
}


/* ----- HERO: remove old centred max-width box ----- */

.ot-hero{
    width:100% !important;
    max-width:none !important;

    height:625px !important;

    margin:0 !important;

    overflow:hidden !important;
}


/* ----- LEFT COPY: same placement/proportion as reference ----- */

.ot-hero-copy{
    left:46px !important;
    top:95px !important;

    width:640px !important;
    max-width:640px !important;
}


.ot-hero-copy h1{
    font-size:56px !important;

    line-height:1.08 !important;

    white-space:nowrap !important;

    letter-spacing:-0.025em !important;
}


.ot-hero-description{
    width:435px !important;
    max-width:435px !important;

    font-size:17px !important;

    line-height:1.68 !important;

    margin-top:25px !important;
}


.ot-hero-actions{
    margin-top:31px !important;
}


.ot-community-line{
    margin-top:22px !important;
}


/* ----- TORTOISE: genuinely cover the whole right side ----- */

.ot-hero-art{
    position:absolute !important;

    top:0 !important;
    right:-10px !important;

    width:72% !important;
    height:100% !important;

    overflow:hidden !important;

    display:block !important;
}


.ot-hero-art img{
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    /*
      Cover is intentional here.
      The original source image has the complete tortoise.
      Cover crops excess sky/rock so the artwork fills the
      wide cinematic hero just like the approved reference.
    */
    object-fit:cover !important;

    object-position:
        center 48% !important;

    transform:
        scale(1.015) !important;

    filter:
        saturate(1.05)
        contrast(1.03)
        brightness(.99) !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.18) 8%,
            rgba(0,0,0,.72) 20%,
            black 31%
        ) !important;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.18) 8%,
            rgba(0,0,0,.72) 20%,
            black 31%
        ) !important;
}


/* Dark blend behind the text, not a visible rectangular edge. */

.ot-hero-art::before{
    content:"";

    position:absolute;

    z-index:3;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            #010812 0%,
            rgba(1,8,18,.90) 7%,
            rgba(1,8,18,.58) 17%,
            rgba(1,8,18,.16) 29%,
            transparent 40%
        ) !important;
}


/* Preserve the rock/image transition into mission bar. */

.ot-hero::after{
    height:75px !important;

    background:
        linear-gradient(
            transparent,
            rgba(1,8,18,.92)
        ) !important;
}


/* ----- MISSION BAR: almost edge-to-edge like reference ----- */

.ot-mission-strip{
    width:calc(100% - 90px) !important;
    max-width:none !important;

    margin:
        -10px
        45px
        0 !important;

    grid-template-columns:
        135px
        240px
        minmax(300px,1fr)
        180px
        180px
        180px !important;
}


/* ----- FOUR FEATURE CARDS: same full-width alignment ----- */

.ot-features{
    width:calc(100% - 90px) !important;
    max-width:none !important;

    margin:
        23px
        45px
        0 !important;

    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;

    gap:20px !important;
}


/* ----- Bottom title alignment ----- */

.ot-future-message{
    padding-top:27px !important;
}


/* ============================================================
   RESPONSIVE SAFETY
   Undo desktop-forced geometry on smaller screens.
   ============================================================ */

@media(max-width:1000px){

    .ot-home-header{
        grid-template-columns:
            1fr
            auto !important;
    }


    .ot-hero{
        height:auto !important;

        display:flex !important;
        flex-direction:column !important;
    }


    .ot-hero-copy{
        position:relative !important;

        left:auto !important;
        top:auto !important;

        width:auto !important;
        max-width:none !important;

        padding:
            55px
            30px
            20px !important;

        text-align:center !important;
    }


    .ot-hero-copy h1{
        white-space:normal !important;
    }


    .ot-hero-description{
        width:auto !important;
        max-width:435px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    .ot-hero-art{
        position:relative !important;

        right:auto !important;

        width:100% !important;
        height:500px !important;
    }


    .ot-hero-art img{
        object-fit:contain !important;

        object-position:center !important;

        transform:none !important;

        -webkit-mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                black 12%,
                black 88%,
                transparent 100%
            ) !important;

        mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                black 12%,
                black 88%,
                transparent 100%
            ) !important;
    }


    .ot-mission-strip{
        width:calc(100% - 34px) !important;

        margin:
            0
            17px !important;

        grid-template-columns:
            repeat(2,1fr) !important;
    }


    .ot-features{
        width:calc(100% - 34px) !important;

        margin:
            23px
            17px
            0 !important;

        grid-template-columns:
            repeat(2,1fr) !important;
    }
}


@media(max-width:640px){

    .ot-hero-copy{
        padding:
            42px
            20px
            15px !important;
    }


    .ot-hero-copy h1{
        font-size:39px !important;
    }


    .ot-hero-art{
        height:390px !important;
    }


    .ot-mission-strip{
        grid-template-columns:
            1fr !important;
    }


    .ot-features{
        grid-template-columns:
            1fr !important;
    }
}



/* ============================================================
   ORIGIN TORTOISE FINAL HERO SCALE V1
   Final visual polish against Founder-approved reference.
   ============================================================ */

/* Make the header brand closer to the approved reference. */
.ot-home-logo{
    width:270px !important;
    height:78px !important;
}


/*
   Pull the hero artwork back so more of the complete tortoise
   is visible instead of having the head/body heavily cropped.
*/
.ot-hero-art{
    width:58% !important;
    right:0 !important;
}


.ot-hero-art img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /*
      Slight upward source bias while retaining head,
      shell, front legs and lower rock.
    */
    object-position:center 44% !important;

    transform:none !important;
}


/*
   Let the artwork fade naturally into the copy area.
   Do not create a visible rectangular image edge.
*/
.ot-hero-art::before{
    background:
        linear-gradient(
            90deg,
            #010812 0%,
            rgba(1,8,18,.82) 8%,
            rgba(1,8,18,.42) 19%,
            rgba(1,8,18,.10) 31%,
            transparent 43%
        ) !important;
}


/* Preserve mobile layout. */
@media(max-width:1000px){

    .ot-home-logo{
        width:205px !important;
        height:65px !important;
    }

    .ot-hero-art{
        width:100% !important;
    }

    .ot-hero-art img{
        object-fit:contain !important;
        object-position:center !important;
    }
}


@media(max-width:640px){

    .ot-home-logo{
        width:180px !important;
        height:59px !important;
    }
}



/* ============================================================
   ORIGIN TORTOISE COSMIC RING RESTORE V1
   Reveal the Founder-approved gold/blue orbital artwork.
   ============================================================ */

/*
   Give the artwork a little more room to reach toward the
   centre without changing the overall homepage composition.
*/
.ot-hero-art{
    width:62% !important;
    right:0 !important;
}


/*
   Keep the tortoise cinematic, but bias upward slightly so
   the upper orbital rings and compass-star remain visible.
*/
.ot-hero-art img{
    object-fit:cover !important;
    object-position:center 38% !important;

    transform:none !important;

    /*
       Earlier fade hid too much of the cosmic ring.
       This version becomes visible much sooner.
    */
    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.48) 4%,
            rgba(0,0,0,.88) 10%,
            black 17%
        ) !important;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0,0,0,.48) 4%,
            rgba(0,0,0,.88) 10%,
            black 17%
        ) !important;
}


/*
   Keep enough dark gradient for readable text,
   but stop covering the beautiful orbit artwork.
*/
.ot-hero-art::before{
    background:
        linear-gradient(
            90deg,
            #010812 0%,
            rgba(1,8,18,.62) 5%,
            rgba(1,8,18,.27) 12%,
            rgba(1,8,18,.06) 21%,
            transparent 30%
        ) !important;
}


/*
   Preserve current mobile behaviour.
*/
@media(max-width:1000px){

    .ot-hero-art{
        width:100% !important;
    }

    .ot-hero-art img{
        object-fit:contain !important;
        object-position:center !important;

        -webkit-mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                black 12%,
                black 88%,
                transparent 100%
            ) !important;

        mask-image:
            linear-gradient(
                180deg,
                transparent 0%,
                black 12%,
                black 88%,
                transparent 100%
            ) !important;
    }
}



/* ============================================================
   ORIGIN TORTOISE HEADER HERO INTEGRATION V1
   Hero artwork flows beneath header while controls remain
   fully interactive.
   ============================================================ */


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

.ot-home-header{
    position:relative !important;

    z-index:80 !important;

    min-height:94px !important;

    grid-template-columns:
        335px
        1fr
        auto !important;

    padding:
        4px
        22px !important;

    /*
       Dark on the logo/text side.
       Gradually transparent toward the artwork.
    */
    background:
        linear-gradient(
            90deg,
            rgba(1,8,18,.99) 0%,
            rgba(1,8,18,.98) 31%,
            rgba(1,8,18,.90) 46%,
            rgba(1,8,18,.60) 59%,
            rgba(1,8,18,.24) 73%,
            rgba(1,8,18,.10) 100%
        ) !important;

    border-bottom:
        1px solid
        rgba(49,74,91,.20) !important;

    overflow:visible !important;
}


/* All actual header controls sit ABOVE the artwork. */

.ot-home-logo,
.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:90 !important;
}


/* ------------------------------------------------------------
   BIGGER / READABLE BRAND
   ------------------------------------------------------------ */

.ot-home-logo{
    width:320px !important;
    height:88px !important;

    margin-left:3px !important;
}


.ot-home-logo img{
    width:100% !important;
    height:100% !important;

    object-fit:contain !important;
    object-position:left center !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(220,164,65,.13)
        ) !important;
}


/* Slight readability help when artwork passes behind nav. */

.ot-home-nav a{
    text-shadow:
        0 1px 4px
        rgba(0,0,0,.90) !important;
}


.ot-server-status{
    text-shadow:
        0 1px 4px
        rgba(0,0,0,.95) !important;
}


/* ------------------------------------------------------------
   LET HERO ART TRAVEL UP BEHIND HEADER
   ------------------------------------------------------------ */

.ot-hero{
    position:relative !important;

    /*
       Must be visible so artwork can rise outside the hero box
       and underneath the header.
    */
    overflow:visible !important;
}


.ot-hero-art{
    position:absolute !important;

    /*
       Header is roughly 94px tall.
       Pull artwork upward behind it.
    */
    top:-94px !important;
    right:0 !important;

    width:62% !important;

    height:
        calc(100% + 94px) !important;

    z-index:1 !important;

    overflow:hidden !important;

    /*
       Critical:
       artwork can NEVER intercept clicks.
    */
    pointer-events:none !important;
}


.ot-hero-art img{
    pointer-events:none !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    /*
       Keep Earth, tortoise head and orbital crown visible.
    */
    object-position:
        center 38% !important;
}


/*
   Reduce the old left-side dark overlay slightly.
   We want to SEE those blue/gold cosmic rings.
*/

.ot-hero-art::before{
    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            rgba(1,8,18,.95) 0%,
            rgba(1,8,18,.58) 5%,
            rgba(1,8,18,.23) 12%,
            rgba(1,8,18,.05) 20%,
            transparent 29%
        ) !important;
}


/* Copy stays in front of artwork. */

.ot-hero-copy{
    position:absolute !important;
    z-index:20 !important;
}


/* Mission strip stays ABOVE bottom edge of artwork. */

.ot-mission-strip{
    position:relative !important;
    z-index:30 !important;
}


/* ------------------------------------------------------------
   MOBILE / SMALL SCREEN SAFETY
   No header overlap on mobile.
   ------------------------------------------------------------ */

@media(max-width:1000px){

    .ot-home-header{
        grid-template-columns:
            1fr
            auto !important;

        background:
            rgba(1,8,18,.97) !important;
    }


    .ot-home-logo{
        width:220px !important;
        height:68px !important;
    }


    .ot-hero{
        overflow:hidden !important;
    }


    .ot-hero-art{
        position:relative !important;

        top:0 !important;
        right:auto !important;

        width:100% !important;
        height:500px !important;
    }


    .ot-hero-art img{
        object-fit:contain !important;
        object-position:center !important;
    }


    .ot-hero-copy{
        position:relative !important;
    }
}


@media(max-width:640px){

    .ot-home-logo{
        width:190px !important;
        height:60px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE CRISP HEADER BRAND V1
   Browser-rendered text replaces blurry raster wordmark.
   HERO / NAV / STATS ARE UNCHANGED.
   ============================================================ */

.ot-home-header{
    grid-template-columns:
        370px
        1fr
        auto !important;
}

.ot-home-logo{
    width:355px !important;
    height:92px !important;

    display:flex !important;
    align-items:center !important;

    gap:11px !important;

    margin-left:4px !important;

    text-decoration:none !important;

    overflow:visible !important;
}


/*
   More specific than the older .ot-home-logo img rule,
   so the emblem cannot be stretched to 100%.
*/
.ot-home-logo img.ot-brand-emblem{
    width:84px !important;
    height:84px !important;

    min-width:84px !important;
    max-width:84px !important;

    flex:
        0 0 84px !important;

    object-fit:contain !important;
    object-position:center !important;

    filter:
        drop-shadow(
            0 0 8px
            rgba(224,172,68,.24)
        ) !important;
}


.ot-brand-copy{
    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    align-items:flex-start !important;

    line-height:1 !important;

    white-space:nowrap !important;
}


.ot-brand-origin{
    color:#efc45e !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:34px !important;

    font-weight:600 !important;

    letter-spacing:.025em !important;

    line-height:.95 !important;

    text-shadow:
        0 0 7px
        rgba(224,170,65,.15) !important;
}


.ot-brand-tortoise{
    margin-top:3px !important;

    color:#e7b64f !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:14px !important;

    font-weight:700 !important;

    letter-spacing:.36em !important;

    line-height:1 !important;
}


.ot-brand-mission{
    margin-top:6px !important;

    color:#d9a43b !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:8px !important;

    font-weight:800 !important;

    line-height:1.25 !important;

    letter-spacing:.08em !important;
}


/* Keep brand above hero artwork and fully clickable. */

.ot-home-logo{
    position:relative !important;
    z-index:110 !important;
}


/* Responsive brand scaling only. */

@media(max-width:1000px){

    .ot-home-logo{
        width:275px !important;
        height:72px !important;
    }

    .ot-home-logo img.ot-brand-emblem{
        width:62px !important;
        height:62px !important;

        min-width:62px !important;
        max-width:62px !important;

        flex-basis:62px !important;
    }

    .ot-brand-origin{
        font-size:25px !important;
    }

    .ot-brand-tortoise{
        font-size:11px !important;
    }

    .ot-brand-mission{
        font-size:6px !important;
    }
}


@media(max-width:640px){

    .ot-home-logo{
        width:235px !important;
        height:64px !important;
    }

    .ot-home-logo img.ot-brand-emblem{
        width:54px !important;
        height:54px !important;

        min-width:54px !important;
        max-width:54px !important;

        flex-basis:54px !important;
    }

    .ot-brand-origin{
        font-size:22px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE HOMEPAGE LOGO OVERLAY V1
   Match the approved Chat workspace brand size without
   increasing header height.
   ============================================================ */


/* Header remains compact regardless of logo size. */

.ot-home-header{
    position:relative !important;

    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        285px
        1fr
        auto !important;

    padding:
        0
        20px !important;

    overflow:visible !important;
}


/*
   Independent logo layer.
   It no longer contributes to the header's height.
*/

.ot-home-logo{
    position:absolute !important;

    z-index:150 !important;

    left:18px !important;
    top:5px !important;

    width:245px !important;
    height:125px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    overflow:visible !important;

    text-decoration:none !important;

    pointer-events:auto !important;
}


/*
   Same combined artwork used in the Chat sidebar.
*/

.ot-home-logo img.ot-home-brand-image{
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;

    object-fit:contain !important;
    object-position:left top !important;

    filter:
        drop-shadow(
            0 2px 5px
            rgba(0,0,0,.35)
        ) !important;
}


/*
   Hide/neutralise any previous HTML-brand rules if they remain
   elsewhere in the CSS.
*/

.ot-brand-copy,
.ot-brand-origin,
.ot-brand-tortoise,
.ot-brand-mission,
.ot-brand-emblem{
    display:none !important;
}


/*
   Navigation/buttons remain above the hero artwork.
*/

.ot-home-nav,
.ot-header-actions{
    position:relative !important;

    z-index:140 !important;
}


/*
   Reserve horizontal space for the floating logo,
   but do NOT reserve additional vertical space.
*/

.ot-home-nav{
    grid-column:2 !important;
}


.ot-header-actions{
    grid-column:3 !important;
}


/* The logo can overlap the hero, like the sidebar branding. */

.ot-hero{
    position:relative !important;
}


/* Responsive safety */

@media(max-width:1000px){

    .ot-home-header{
        height:auto !important;
        min-height:80px !important;
        max-height:none !important;

        grid-template-columns:
            245px
            1fr !important;
    }

    .ot-home-logo{
        left:12px !important;
        top:5px !important;

        width:215px !important;
        height:105px !important;
    }

}


@media(max-width:640px){

    .ot-home-header{
        grid-template-columns:
            190px
            1fr !important;
    }

    .ot-home-logo{
        width:180px !important;
        height:88px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE EXACT CHAT BRAND MATCH V1
   Homepage brand uses same geometry as Chat sidebar.
   Header remains 88px; logo floats independently.
   ============================================================ */


/* Header DOES NOT grow with logo. */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        285px
        1fr
        auto !important;

    overflow:visible !important;
}


/* Exact floating brand box based on Chat workspace. */

.ot-home-logo{
    position:absolute !important;

    z-index:160 !important;

    left:18px !important;
    top:0 !important;

    width:272px !important;
    height:176px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    overflow:hidden !important;

    pointer-events:auto !important;
}


/* Exact Chat image height. */

.ot-home-logo img.ot-home-brand-image{
    display:block !important;

    width:272px !important;
    height:158px !important;

    max-width:none !important;

    object-fit:contain !important;
    object-position:left top !important;
}


/*
   Mask only the tiny baked-in tagline.
   ORIGIN / TORTOISE artwork remains untouched.
*/

.ot-home-logo::after{
    content:"";

    position:absolute !important;

    z-index:2 !important;

    left:102px !important;
    right:0 !important;

    top:92px !important;

    height:30px !important;

    background:#010812 !important;

    pointer-events:none !important;
}


/*
   Same crisp mission positioning as Chat.
*/

.ot-home-brand-mission{
    position:absolute !important;

    z-index:5 !important;

    left:100px !important;
    right:0 !important;

    top:100px !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;

    pointer-events:none !important;
}


.ot-home-brand-mission span{
    display:block !important;

    margin:0 !important;

    color:#e5ad3f !important;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;

    font-size:9.5px !important;

    font-weight:800 !important;

    line-height:1.05 !important;

    letter-spacing:.04em !important;
}


.ot-home-brand-mission span b{
    color:#f3c85e !important;

    font-weight:900 !important;
}


.ot-home-brand-mission strong{
    display:block !important;

    margin-top:3px !important;

    color:#f0bd4e !important;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;

    font-size:10px !important;

    font-weight:850 !important;

    line-height:1.05 !important;

    letter-spacing:.025em !important;
}


/* Nav and buttons remain safely clickable above hero. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:150 !important;
}


/* Hero remains visual-only beneath controls. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}


/* Mobile: reduce floating logo without increasing header. */

@media(max-width:1000px){

    .ot-home-logo{
        width:235px !important;
        height:150px !important;
    }

    .ot-home-logo img.ot-home-brand-image{
        width:235px !important;
        height:137px !important;
    }

    .ot-home-logo::after{
        left:88px !important;
        top:80px !important;
        height:27px !important;
    }

    .ot-home-brand-mission{
        left:87px !important;
        top:87px !important;
    }

    .ot-home-brand-mission span{
        font-size:8px !important;
    }

    .ot-home-brand-mission strong{
        font-size:8.5px !important;
    }
}


@media(max-width:640px){

    .ot-home-logo{
        width:195px !important;
        height:125px !important;
    }

    .ot-home-logo img.ot-home-brand-image{
        width:195px !important;
        height:113px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE CLEAN HEADER BRAND V2
   No raster wordmark masking.
   Emblem + browser-rendered text only.
   ============================================================ */


/* Header geometry stays locked. */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        300px
        1fr
        auto !important;

    overflow:visible !important;
}


/* ------------------------------------------------------------
   FLOATING BRAND BOX
   ------------------------------------------------------------ */

.ot-home-logo{
    position:absolute !important;

    z-index:170 !important;

    left:17px !important;
    top:4px !important;

    width:282px !important;
    height:132px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:flex-start !important;

    gap:8px !important;

    overflow:visible !important;

    text-decoration:none !important;

    pointer-events:auto !important;
}


/*
   Completely remove old masking layers.
*/

.ot-home-logo::before,
.ot-home-logo::after{
    content:none !important;
    display:none !important;
}


/* ------------------------------------------------------------
   EMBLEM
   ------------------------------------------------------------ */

.ot-home-logo img.ot-home-emblem{
    display:block !important;

    width:96px !important;
    height:96px !important;

    min-width:96px !important;
    max-width:96px !important;

    flex:0 0 96px !important;

    margin:0 !important;

    object-fit:contain !important;
    object-position:center !important;

    filter:
        drop-shadow(
            0 2px 7px
            rgba(0,0,0,.38)
        ) !important;
}


/* ------------------------------------------------------------
   WORDMARK
   ------------------------------------------------------------ */

.ot-home-wordmark{
    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    margin-top:17px !important;

    line-height:1 !important;

    white-space:nowrap !important;
}


.ot-home-origin{
    display:block !important;

    margin:0 !important;

    color:#edc45d !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:34px !important;

    font-weight:600 !important;

    line-height:.88 !important;

    letter-spacing:.025em !important;

    text-shadow:
        0 0 6px
        rgba(229,174,63,.14) !important;
}


.ot-home-tortoise{
    display:block !important;

    margin-top:5px !important;

    color:#e5b34a !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:13px !important;

    font-weight:700 !important;

    line-height:1 !important;

    letter-spacing:.40em !important;
}


.ot-home-tagline{
    display:block !important;

    margin-top:7px !important;

    color:#dca63c !important;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;

    font-size:7.5px !important;

    font-weight:800 !important;

    line-height:1.1 !important;

    letter-spacing:.06em !important;
}


.ot-home-tagline b{
    color:#f1c358 !important;
}


.ot-home-tagline small{
    display:block !important;

    margin-top:3px !important;

    color:#e8b545 !important;

    font-size:7.5px !important;

    font-weight:850 !important;

    letter-spacing:.045em !important;
}


/* Remove all previous home-brand helper layers. */

.ot-home-brand-image,
.ot-home-brand-mission,
.ot-brand-copy,
.ot-brand-origin,
.ot-brand-tortoise,
.ot-brand-mission,
.ot-brand-emblem{
    display:none !important;
}


/* Nav / controls stay above hero and clickable. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:160 !important;
}


/* Hero remains visual-only. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media(max-width:1000px){

    .ot-home-logo{
        width:245px !important;
        height:112px !important;
    }

    .ot-home-logo img.ot-home-emblem{
        width:78px !important;
        height:78px !important;

        min-width:78px !important;
        max-width:78px !important;

        flex-basis:78px !important;
    }

    .ot-home-wordmark{
        margin-top:14px !important;
    }

    .ot-home-origin{
        font-size:28px !important;
    }

    .ot-home-tortoise{
        font-size:11px !important;
    }

    .ot-home-tagline,
    .ot-home-tagline small{
        font-size:6.5px !important;
    }
}


@media(max-width:640px){

    .ot-home-logo{
        left:10px !important;

        width:205px !important;
        height:95px !important;
    }

    .ot-home-logo img.ot-home-emblem{
        width:66px !important;
        height:66px !important;

        min-width:66px !important;
        max-width:66px !important;

        flex-basis:66px !important;
    }

    .ot-home-origin{
        font-size:23px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE SERVER STATUS READABILITY V1
   Keep public server state readable over cinematic hero art.
   ============================================================ */

.ot-server-status{
    position:relative !important;
    z-index:180 !important;

    display:inline-flex !important;
    align-items:center !important;

    gap:7px !important;

    min-height:34px !important;

    padding:
        7px
        11px !important;

    margin:0 !important;

    border:
        1px solid
        rgba(77,137,162,.48) !important;

    border-radius:10px !important;

    background:
        rgba(2,12,22,.82) !important;

    -webkit-backdrop-filter:
        blur(9px) !important;

    backdrop-filter:
        blur(9px) !important;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.28),
        inset 0 1px 0
        rgba(255,255,255,.035) !important;

    color:#e7eef5 !important;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;

    font-size:11px !important;

    font-weight:600 !important;

    line-height:1 !important;

    letter-spacing:.01em !important;

    white-space:nowrap !important;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,.95) !important;
}


/* Existing live-status dot becomes clearer. */

.ot-server-status::before{
    content:"" !important;

    display:block !important;

    width:8px !important;
    height:8px !important;

    flex:
        0 0 8px !important;

    border-radius:50% !important;

    background:#27e1ce !important;

    box-shadow:
        0 0 8px
        rgba(39,225,206,.85) !important;
}


/* Make any highlighted Online text clearly visible. */

.ot-server-status strong,
.ot-server-status b,
.ot-server-status .online,
.ot-server-status [data-status="online"]{
    color:#38ead5 !important;

    font-weight:800 !important;

    text-shadow:
        0 0 7px
        rgba(56,234,213,.24) !important;
}


/* Header actions remain above hero artwork. */

.ot-header-actions{
    position:relative !important;
    z-index:185 !important;
}


/* Slightly tighter on narrower screens. */

@media(max-width:1250px){

    .ot-server-status{
        padding:
            6px
            9px !important;

        font-size:10px !important;
    }

}


@media(max-width:1000px){

    .ot-server-status{
        min-height:31px !important;

        font-size:9.5px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE CRISP BRAND TAGLINE V1
   Improve readability of:
   PROTECT ? PRESERVE
   BUILD A BETTER FUTURE
   ============================================================ */

.ot-home-tagline{
    margin-top:7px !important;

    color:#e6b44b !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:9px !important;

    font-weight:900 !important;

    line-height:1.08 !important;

    letter-spacing:.025em !important;

    white-space:nowrap !important;

    text-rendering:optimizeLegibility !important;

    transform:none !important;
}


.ot-home-tagline b{
    color:#f5cb62 !important;

    font-weight:900 !important;
}


.ot-home-tagline small{
    display:block !important;

    margin-top:4px !important;

    color:#f0bd50 !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:9.5px !important;

    font-weight:900 !important;

    line-height:1.08 !important;

    letter-spacing:.015em !important;

    white-space:nowrap !important;

    text-rendering:optimizeLegibility !important;

    transform:none !important;
}


/*
   Give the text enough horizontal room.
   This is still a floating logo layer and does NOT enlarge
   the 88px header.
*/

.ot-home-logo{
    width:305px !important;
}


/* Mobile safety */

@media(max-width:1000px){

    .ot-home-tagline{
        font-size:8px !important;
    }

    .ot-home-tagline small{
        font-size:8.5px !important;
    }

}


@media(max-width:640px){

    .ot-home-tagline{
        font-size:7px !important;
    }

    .ot-home-tagline small{
        font-size:7.5px !important;
    }

}



/* ============================================================
   COPIED DIRECTLY FROM CHAT WORKSPACE BRAND RULES
   ============================================================ */
.ot-home-chat-brand{position:relative;display:flex;align-items:center;height:176px;margin:0 -16px 10px;overflow:hidden}
.ot-home-chat-brand img{display:block;width:100%;height:158px;object-fit:contain;object-position:left top}
.ot-home-chat-mission span{
    display:block;
    margin:0;

    color:#e5ad3f;

    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:9.5px;
    font-weight:800;
    line-height:1;

    letter-spacing:.11em;
    white-space:nowrap;
}
.ot-home-chat-mission span b{
    color:#f3c85e;
    font-weight:900;
}
.ot-home-chat-mission strong{
    display:block;
    margin:0;

    color:#f0bd4e;

    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:10px;
    font-weight:850;
    line-height:1;

    letter-spacing:.065em;
    white-space:nowrap;
}

/* ============================================================
   ORIGIN TORTOISE EXACT CHAT LOGO ON HOME V1
   The visual branding rules above are copied from workspace.css.
   Only positioning differs so Home's header remains 88px.
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        300px
        1fr
        auto !important;

    overflow:visible !important;
}


/* Chat brand placed in an independent Home overlay box. */

.ot-home-logo.ot-home-chat-brand{
    position:absolute !important;

    z-index:190 !important;

    left:4px !important;
    top:0 !important;

    width:284px !important;
    height:176px !important;

    margin:0 !important;

    overflow:hidden !important;

    pointer-events:auto !important;
}


/*
   Use the SAME Chat image geometry.
   No browser reconstruction of ORIGIN/TORTOISE.
*/

.ot-home-logo.ot-home-chat-brand > img{
    display:block !important;

    width:100% !important;
    height:158px !important;

    object-fit:contain !important;
    object-position:left top !important;

    max-width:none !important;

    filter:none !important;

    transform:none !important;
}


/*
   Explicitly remove every previous homepage logo reconstruction.
*/

.ot-home-emblem,
.ot-home-wordmark,
.ot-home-origin,
.ot-home-tortoise,
.ot-home-tagline,
.ot-home-brand-image,
.ot-home-brand-mission,
.ot-brand-copy,
.ot-brand-origin,
.ot-brand-tortoise,
.ot-brand-emblem{
    display:none !important;
}


/* Keep the copied Chat mission visible. */

.ot-home-chat-mission{
    display:flex !important;
}


/* Header controls remain safely above hero artwork. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:180 !important;
}


/* Hero cannot intercept any header clicks. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}


/* Mobile safety only. */

@media(max-width:1000px){

    .ot-home-logo.ot-home-chat-brand{
        width:245px !important;
        height:154px !important;
    }

    .ot-home-logo.ot-home-chat-brand > img{
        height:137px !important;
    }

}


@media(max-width:640px){

    .ot-home-logo.ot-home-chat-brand{
        width:205px !important;
        height:130px !important;
    }

    .ot-home-logo.ot-home-chat-brand > img{
        height:114px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE TAGLINE FINAL CLARITY V1
   Increase only the two small mission lines.
   ============================================================ */

.ot-home-chat-mission{
    top:99px !important;

    line-height:1 !important;

    text-shadow:none !important;
    filter:none !important;
    transform:none !important;
}


.ot-home-chat-mission span{
    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:11px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:.015em !important;

    color:#edb94e !important;

    text-shadow:none !important;
}


.ot-home-chat-mission span b{
    color:#ffd269 !important;
}


.ot-home-chat-mission strong{
    margin-top:4px !important;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size:12px !important;
    font-weight:800 !important;

    line-height:1 !important;

    letter-spacing:0 !important;

    color:#f4c65b !important;

    text-shadow:none !important;
}


/*
   Ensure the old baked-in tiny tagline remains hidden
   underneath the clear browser text.
*/
.ot-home-logo.ot-home-chat-brand::after{
    top:91px !important;
    height:35px !important;

    background:#010812 !important;
}


@media(max-width:1000px){

    .ot-home-chat-mission span{
        font-size:10px !important;
    }

    .ot-home-chat-mission strong{
        font-size:11px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE VECTOR HEADER BRAND V1
   Dedicated sharp homepage branding.
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        380px
        1fr
        auto !important;

    overflow:visible !important;
}


.ot-home-header > .ot-home-logo.ot-home-vector-brand{
    position:absolute !important;

    left:14px !important;
    top:1px !important;

    z-index:200 !important;

    width:370px !important;
    height:122px !important;

    margin:0 !important;
    padding:0 !important;

    display:block !important;

    overflow:visible !important;

    pointer-events:auto !important;

    text-decoration:none !important;
}


/* Kill every previous logo masking layer. */

.ot-home-header > .ot-home-logo.ot-home-vector-brand::before,
.ot-home-header > .ot-home-logo.ot-home-vector-brand::after{
    content:none !important;
    display:none !important;
}


/* SVG stays at native vector geometry. */

.ot-home-header
.ot-home-logo.ot-home-vector-brand
> img.ot-home-vector-logo{

    display:block !important;

    width:370px !important;
    height:122px !important;

    max-width:none !important;
    min-width:0 !important;

    object-fit:contain !important;
    object-position:left top !important;

    filter:none !important;
    transform:none !important;

    opacity:1 !important;
}


/*
   Disable every old homepage brand child if stale CSS/DOM
   definitions still exist elsewhere.
*/

.ot-home-brand-image,
.ot-home-brand-mission,
.ot-home-chat-mission,
.ot-home-emblem,
.ot-home-wordmark,
.ot-home-origin,
.ot-home-tortoise,
.ot-home-tagline,
.ot-brand-copy,
.ot-brand-origin,
.ot-brand-tortoise,
.ot-brand-mission,
.ot-brand-emblem{
    display:none !important;
}


/* Existing header controls remain above the hero artwork. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:190 !important;
}


/* Hero remains visual-only. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}


@media(max-width:1000px){

    .ot-home-header >
    .ot-home-logo.ot-home-vector-brand{
        width:300px !important;
        height:99px !important;
    }

    .ot-home-header
    .ot-home-logo.ot-home-vector-brand
    > img.ot-home-vector-logo{
        width:300px !important;
        height:99px !important;
    }

}


@media(max-width:640px){

    .ot-home-header >
    .ot-home-logo.ot-home-vector-brand{
        left:8px !important;

        width:245px !important;
        height:81px !important;
    }

    .ot-home-header
    .ot-home-logo.ot-home-vector-brand
    > img.ot-home-vector-logo{
        width:245px !important;
        height:81px !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE EXACT CHAT LOGO ASSET V1

   Same asset used in Chat.
   Same 176px brand box.
   Same 158px image height.
   No SVG.
   No reconstructed tagline.
   No masks.
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        300px
        1fr
        auto !important;

    overflow:visible !important;
}


/* Independent floating box ? same height as Chat brand. */

.ot-home-header >
.ot-home-logo.ot-home-exact-chat-logo{

    position:absolute !important;

    left:4px !important;
    top:0 !important;

    z-index:220 !important;

    width:272px !important;
    height:176px !important;

    margin:0 !important;
    padding:0 !important;

    display:flex !important;
    align-items:center !important;

    overflow:hidden !important;

    text-decoration:none !important;

    pointer-events:auto !important;
}


/* Kill every old logo mask/reconstruction. */

.ot-home-header >
.ot-home-logo.ot-home-exact-chat-logo::before,

.ot-home-header >
.ot-home-logo.ot-home-exact-chat-logo::after{

    content:none !important;
    display:none !important;
}


/*
   EXACT same image approach as Chat:
   height = 158px
   object-fit = contain
   object-position = left top
*/

.ot-home-header
.ot-home-logo.ot-home-exact-chat-logo
> img.ot-home-exact-chat-logo-image{

    display:block !important;

    width:100% !important;
    height:158px !important;

    max-width:none !important;
    min-width:0 !important;

    object-fit:contain !important;
    object-position:left top !important;

    margin:0 !important;
    padding:0 !important;

    filter:none !important;
    transform:none !important;

    opacity:1 !important;
}


/* Disable every previous experimental Home logo layer. */

.ot-home-vector-logo,
.ot-home-vector-brand,
.ot-home-brand-image,
.ot-home-brand-mission,
.ot-home-chat-mission,
.ot-home-emblem,
.ot-home-wordmark,
.ot-home-origin,
.ot-home-tortoise,
.ot-home-tagline,
.ot-brand-copy,
.ot-brand-origin,
.ot-brand-tortoise,
.ot-brand-mission,
.ot-brand-emblem{

    display:none !important;
}


/* Header controls remain clickable over hero. */

.ot-home-nav,
.ot-header-actions{

    position:relative !important;
    z-index:210 !important;
}


/* Hero remains decorative only. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{

    pointer-events:none !important;
}


/* Smaller screens */

@media(max-width:1000px){

    .ot-home-header >
    .ot-home-logo.ot-home-exact-chat-logo{

        width:235px !important;
        height:152px !important;
    }

    .ot-home-header
    .ot-home-logo.ot-home-exact-chat-logo
    > img.ot-home-exact-chat-logo-image{

        height:137px !important;
    }

}


@media(max-width:640px){

    .ot-home-header >
    .ot-home-logo.ot-home-exact-chat-logo{

        left:8px !important;

        width:195px !important;
        height:126px !important;
    }

    .ot-home-header
    .ot-home-logo.ot-home-exact-chat-logo
    > img.ot-home-exact-chat-logo-image{

        height:113px !important;
    }

}



/* ============================================================
   EXACT RULES COPIED FROM CHAT WORKSPACE.CSS
   ============================================================ */
.ot-home-chat-clone{position:relative;display:flex;align-items:center;height:176px;margin:0 -16px 10px;overflow:hidden}
.ot-home-chat-clone img{display:block;width:100%;height:158px;object-fit:contain;object-position:left top}
.ot-home-chat-clone-mission span{
    display:block;
    margin:0;

    color:#e5ad3f;

    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:9.5px;
    font-weight:800;
    line-height:1;

    letter-spacing:.11em;
    white-space:nowrap;
}
.ot-home-chat-clone-mission span b{
    color:#f3c85e;
    font-weight:900;
}
.ot-home-chat-clone-mission strong{
    display:block;
    margin:0;

    color:#f0bd4e;

    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:10px;
    font-weight:850;
    line-height:1;

    letter-spacing:.065em;
    white-space:nowrap;
}

/* ============================================================
   ORIGIN TORTOISE LITERAL CHAT LOGO CLONE V1

   This is the Chat branding copied directly from workspace.css.
   Homepage controls ONLY its position.
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        300px
        1fr
        auto !important;

    overflow:visible !important;
}


/*
   240px is the Chat sidebar's effective content width.
   Chat's own -16px brand margins then produce the same
   approximately 272px visible brand width.
*/

.ot-home-chat-logo-slot{
    position:absolute !important;

    left:20px !important;
    top:0 !important;

    width:240px !important;
    height:176px !important;

    z-index:250 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    text-decoration:none !important;

    pointer-events:auto !important;
}


/*
   IMPORTANT:
   Do not resize or restyle the cloned Chat logo here.
   workspace.css-derived rules above own its rendering.
*/

.ot-home-chat-logo-slot > .ot-home-chat-clone{
    pointer-events:none !important;
}


/* But the enclosing Home link itself remains clickable. */

.ot-home-chat-logo-slot{
    pointer-events:auto !important;
}


/* Navigation remains safely above hero. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:240 !important;
}


/* Hero remains decorative. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}


/* Nothing from the previous Home logo systems is displayed. */

.ot-home-logo,
.ot-home-vector-logo,
.ot-home-vector-brand,
.ot-home-brand-image,
.ot-home-brand-mission,
.ot-home-chat-mission,
.ot-home-emblem,
.ot-home-wordmark,
.ot-home-origin,
.ot-home-tortoise,
.ot-home-tagline{
    display:none !important;
}


@media(max-width:1000px){

    .ot-home-chat-logo-slot{
        left:14px !important;

        transform:scale(.86) !important;
        transform-origin:left top !important;
    }

}


@media(max-width:640px){

    .ot-home-chat-logo-slot{
        left:8px !important;

        transform:scale(.72) !important;
        transform-origin:left top !important;
    }

}



/* ============================================================
   ORIGIN TORTOISE FINAL CHAT LOGO
   Literal rendered Chat logo at native 280x130 size.
   No reconstruction. No scaling. No masks.
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;

    grid-template-columns:
        300px
        1fr
        auto !important;

    overflow:visible !important;
}

.ot-home-final-chat-logo{
    position:absolute !important;

    left:14px !important;
    top:0 !important;

    width:280px !important;
    height:130px !important;

    z-index:400 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    pointer-events:auto !important;
}

.ot-home-final-chat-logo > img{
    display:block !important;

    width:280px !important;
    height:130px !important;

    min-width:280px !important;
    max-width:280px !important;

    object-fit:none !important;

    margin:0 !important;
    padding:0 !important;

    filter:none !important;
    transform:none !important;

    image-rendering:auto !important;

    opacity:1 !important;
}

/* Absolutely no old logo masking. */

.ot-home-final-chat-logo::before,
.ot-home-final-chat-logo::after{
    content:none !important;
    display:none !important;
}

/* Header controls stay above the hero. */

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:390 !important;
}

/* Hero stays decorative and unchanged. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}



/* ============================================================
   ORIGIN TORTOISE FINAL EXACT CHAT LOGO
   ============================================================ */

.ot-home-header{
    height:88px !important;
    min-height:88px !important;
    max-height:88px !important;
    overflow:visible !important;
}

.ot-home-final-logo{
    position:absolute !important;

    left:14px !important;
    top:0 !important;

    width:280px !important;
    height:130px !important;

    z-index:500 !important;

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    pointer-events:auto !important;
}

.ot-home-final-logo::before,
.ot-home-final-logo::after{
    display:none !important;
    content:none !important;
}

.ot-home-final-logo > img{
    display:block !important;

    width:280px !important;
    height:130px !important;

    min-width:280px !important;
    max-width:280px !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:none !important;

    filter:none !important;
    transform:none !important;

    opacity:1 !important;
}

.ot-home-nav,
.ot-header-actions{
    position:relative !important;
    z-index:490 !important;
}

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before{
    pointer-events:none !important;
}



/* ============================================================
   ORIGIN TORTOISE FINAL LOGO FORCE
   ============================================================ */

.ot-home-final-logo{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;

    position:absolute !important;
    left:14px !important;
    top:0 !important;

    width:280px !important;
    height:130px !important;

    z-index:9999 !important;

    background-image:url("/static/assets/origin-tortoise-home-final.png") !important;
    background-repeat:no-repeat !important;
    background-position:left top !important;
    background-size:280px 130px !important;

    pointer-events:auto !important;
}

/* Do not let any previous image CSS interfere. */
.ot-home-final-logo > img{
    display:none !important;
}

/* Keep the header from clipping the logo. */
.ot-home-header{
    overflow:visible !important;
}

/* ============================================================
   ORIGIN TORTOISE HOME BRAND READABILITY V2

   Founder-directed branding repair.

   - canonical professional Origin Tortoise logo
   - full logo artwork retained
   - larger physical render size
   - mission/tagline readable
   - no stretching
   - Home only
   - no changes to hero/cards/stats
   ============================================================ */


/* ------------------------------------------------------------
   HEADER SPACE

   Increase the horizontal brand allowance without turning
   the header into an oversized banner.
   ------------------------------------------------------------ */

.ot-home-header {

    height:
        112px !important;

    min-height:
        112px !important;

    max-height:
        112px !important;

    grid-template-columns:
        455px
        1fr
        auto !important;

    padding:
        0
        22px !important;

    overflow:
        visible !important;
}


/* ------------------------------------------------------------
   CANONICAL BRAND

   Unique ID means none of the old experimental logo classes
   can resize, mask or hide this image.
   ------------------------------------------------------------ */

#ot-home-brand-v2 {

    position:
        absolute !important;

    z-index:
        10000 !important;

    left:
        18px !important;

    top:
        -2px !important;

    width:
        440px !important;

    height:
        auto !important;

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    text-decoration:
        none !important;

    pointer-events:
        auto !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


#ot-home-brand-v2::before,
#ot-home-brand-v2::after {

    content:
        none !important;

    display:
        none !important;
}


/* ------------------------------------------------------------
   IMAGE

   Preserve the original aspect ratio.
   Absolutely no object-fit:fill.
   ------------------------------------------------------------ */

#ot-home-brand-v2 > img {

    display:
        block !important;

    width:
        440px !important;

    height:
        auto !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        left top !important;

    filter:
        none !important;

    transform:
        none !important;

    image-rendering:
        auto !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/* Existing controls remain above decorative hero artwork. */

.ot-home-nav,
.ot-header-actions {

    position:
        relative !important;

    z-index:
        9000 !important;
}


/* Hero remains decorative and cannot block controls. */

.ot-hero-art,
.ot-hero-art img,
.ot-hero-art::before {

    pointer-events:
        none !important;
}


/* ------------------------------------------------------------
   MEDIUM SCREEN
   ------------------------------------------------------------ */

@media(max-width:1280px) {

    .ot-home-header {

        grid-template-columns:
            390px
            1fr
            auto !important;
    }


    #ot-home-brand-v2 {

        width:
            375px !important;
    }


    #ot-home-brand-v2 > img {

        width:
            375px !important;
    }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media(max-width:1000px) {

    .ot-home-header {

        height:
            auto !important;

        min-height:
            100px !important;

        max-height:
            none !important;

        grid-template-columns:
            340px
            1fr !important;
    }


    #ot-home-brand-v2 {

        left:
            12px !important;

        top:
            2px !important;

        width:
            325px !important;
    }


    #ot-home-brand-v2 > img {

        width:
            325px !important;
    }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:640px) {

    .ot-home-header {

        grid-template-columns:
            255px
            1fr !important;
    }


    #ot-home-brand-v2 {

        left:
            8px !important;

        width:
            250px !important;
    }


    #ot-home-brand-v2 > img {

        width:
            250px !important;
    }

}