.hero-shell {
      position: relative;
      overflow: hidden;
      background: rgba(232, 216, 202, .94);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 14px clamp(14px, 2.4vw, 30px)
    }

    .hero-shell:before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      pointer-events: none
    }

    .home-link {
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: max-content;
      padding: 8px 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 999px;
      background: #8c6f58;
      transition: transform .18s ease, background .18s ease;
      white-space: nowrap
    }

.home-link:visited {
    color: #fff;
}
    .home-link:hover {
      transform: translateY(-1px);
      background: #745a48
    }

    .brand-card {
      position: relative;
      z-index: 2;
display:flex;
align-items: center;
flex-direction:row;
flex-wrap: nowrap;
justify-content: space-between;
      align-items: center;
      gap: 20px;
      max-height: 300px;
      overflow: hidden;

      background: linear-gradient(180deg, #e8dbcc, #cfbfa5);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 20px;
      padding-top: 0px;
      padding-bottom: 0px;
      padding-left: 28px;
      padding-right: 28px;
      box-shadow: 0 12px 30px rgba(40, 28, 18, .18);
    }

    .brand-left {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      border-right: 1px solid rgba(255, 255, 255, .10);
    }

    .brand-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .brand-logo {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height: 100%;
    }

    .brand-logo img {
      max-height: 210px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }

    .uic-logo {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .uic-logo img {
      max-height: 140px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }

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


        .tools-panel {
      background: rgba(232, 216, 202, .92);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 24px clamp(18px, 3vw, 34px)
    }

        :root {
      --ink: #2d241d;
      --muted: #6f6257;
      --bg: #d9ccb9;
      --surface: #e8d8ca;
      --line: #b8a38c;
      --accent: #8c6f58;
      --blue: #5d4d42;
      --soft: #cfbfa5;
      --shadow: 0 18px 44px rgba(40, 28, 18, .22);
      --radius: 18px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 430px),
        radial-gradient(circle at 8% 0%, rgba(207, 191, 165, .20), transparent 360px),
        radial-gradient(circle at 88% 6%, rgba(93, 77, 66, .16), transparent 390px),
        var(--bg);
    }

    a {
      color: var(--blue)
    }

    .page {
      width: 100%;
      padding: 24px clamp(18px, 3vw, 54px) 42px
    }


    
/* Generic pill-style buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
.et_pb_button {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: max-content;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: #8c6f58;
    transition: transform .18s ease, background .18s ease;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.button:hover,
.btn:hover,
.et_pb_button:hover {
    transform: translateY(-1px);
    background: #745a48;
    color: #fff !important;
    text-decoration: none;
}

/* Optional wrapper if you want buttons centered */
.button-wrap,
.header-home {
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Disabled state */
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
.button.disabled,
.btn.disabled,
.et_pb_button:disabled,
a.button.disabled {
    background: #b5b5b5 !important;
    border-color: #a0a0a0 !important;
    color: #f0f0f0 !important;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none !important;
    pointer-events: none;
}