 <style>

        .left{
          display: flex;
          flex-direction: column;
        }

        .actions{
  margin-top: auto; /* 👈 pushes buttons to the bottom */
}
        /* ===== Palette (dark + red accent) ===== */
        :root{
          --bg:#0b0c0e;
          --card:#121418;
          --border:#1c1f27;
          --text:#eef1f6;
          --muted:#9aa3b2;
          --accent:#22c55e;
          --accent-2:#22c55e;
        }

        *{box-sizing:border-box}
        html,body{height:100%;margin:0}
        body{
          font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
          color: var(--text);
          line-height: 1.6;
          background-color: var(--bg);
          /* subtle grid background */
          background-image:
            radial-gradient(#121418 1px, transparent 1px),
            radial-gradient(#121418 1px, transparent 1px);
          background-position: 0 0, 25px 25px;
          background-size: 50px 50px;
          padding: 24px;
        }

        /* ===== Page layout with right sidebar ===== */
        .layout {
          display: grid;
          grid-template-columns: 1fr 320px;
          align-items: start;   /* 👈 don’t stretch rows */
          gap: 24px;
          max-width: 1100px;
          margin: 0 auto;
        }

        /* ===== Cards ===== */
        .header-card,
        .side-card{
          background: var(--card);
          border: 1px solid var(--border);
          border-radius: 16px;
        }

        /* ===== Header Card (left) ===== */
        .header-card{
          padding: 28px;
          display: grid;
          grid-template-columns: 1.2fr .8fr;
          gap: 28px;
        }
        .eyebrow{
          color: var(--muted);
          font-size: 12px;
          letter-spacing: .4px;
          margin-bottom: 8px;
        }
        .title{
          font-size: clamp(14px, 2.6vw, 18px);
          line-height: 1.35;
          margin: 0 0 12px 0;
        }
        .title a{
          color: var(--text);
          font-weight: 700;
          text-decoration: none;
          border-bottom: 2px solid var(--accent);
        }
        .lead{color: var(--muted); margin: 0 0 18px 0}

        /* Buttons row */
        .actions{
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
          margin-top: 18px;
        }
        .icon-btn, .cta{
          height: 46px; min-width: 46px;
          padding: 0 16px;
          border-radius: 12px;
          display: inline-flex; align-items: center; justify-content: center;
          border: 2px solid var(--accent);
          background: transparent;
          color: var(--text);
          font-weight: 600;
          text-decoration: none;
          transition: transform .15s ease, background .15s ease, border-color .15s ease;
        }
        .icon-btn{width: 46px; padding: 0;}
        .icon-btn:hover{background: rgba(255,255,255,0.08);; transform: translateY(-1px)}
        .glyph{font-size: 18px; line-height: 1; transform: translateY(1px)}
        .cta{
          padding: 0 18px;
          box-shadow: inset 0 0 0 1px rgba(255,81,81,.15);
        }
        .cta:hover{background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08)); transform: translateY(-1px)}

        /* Avatar placeholder (right of header card) */
        .avatar-box{
          background: #0a0b0d;
          border: 1px solid #2b2f3a;
          border-radius: 14px;

          width: 256px;         /* fixed width */
          height: 256px;        /* fixed height */
          min-height: 0;        /* cancel any previous min-height */
          overflow: hidden;
          justify-self: end;    /* align to right edge of grid */
          align-self: start;    /* don’t stretch vertically */

          display: grid;
          place-items: center;
          color:#444b57;
          font-weight:600;
          letter-spacing:.4px;
        }

        .avatar-box img{
        width: 100%;
        height: 100%;
        object-fit: contain;    /* or "cover" if you want it cropped */
        }

        /* ===== Sidebar (right) ===== */
        .side-card{
          padding: 22px;
          position: sticky;
          top: 24px;
          height: fit-content;
          /* faint red inner outline like reference */
          //box-shadow: 0 0 0 2px rgba(255,81,81,.14) inset;
        }
        .side-card h2{margin:0 0 10px 0; font-size:20px}
        .side-card p{color:var(--muted); margin:0 0 12px 0}
        .side-card ul{margin:0 0 12px 18px; padding:0}
        .side-card li{margin:6px 0}

        /* Responsive */
        @media (max-width: 900px){
          .regular-links{ grid-template-columns: 1fr; }
          .layout{grid-template-columns: 1fr}
          .header-card{grid-template-columns: 1fr}
          .side-card{position: static; box-shadow:none}
        }

        .header-card > div:first-child {           /* left column */
      display: flex;
      flex-direction: column;
    }

    .header-card .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: auto !important;            /* overrides the 18px rule */
    }
            /* Left column fills height */
    .header-card > div:first-child {
      display: flex;
      flex-direction: column;
    }

    /* Push the whole footer-block down */
    .footer-block {
      margin-top: auto;   /* pushes both lead + actions to bottom */
    }

    /* Style inside as usual */
    .footer-block .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 10px;   /* small gap between "Business Inquiries Only" and buttons */
    }

            .intro {
      font-size: clamp(13px, 2.0vw, 16px);
      line-height: 1.4;
      font-weight: 400;   /* default = normal */
      margin: 0 0 12px 0;
    }

    .intro .name {
      font-weight: 700;   /* bold only the name */

      text-decoration: none;
      color: var(--text);
    }

        .links-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 32px auto 0; /* space above the section */
}

/* Individual cards */
.link-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.link-card:hover{
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* Optional: add small arrow */
.link-card::after{
  content: "↗";
  font-size: 14px;
  opacity: 0.7;
}

.layout{
  align-items: start;                /* don't stretch rows */
  grid-template-columns: minmax(0,1fr) 320px;  /* left | right */
}

/* Sidebar stays in right column and spans down */
.side-card{
  grid-column: 2;
  grid-row: 1 / span 2;             /* occupies row 1 and 2 */
}

/* Cards go in LEFT column, directly under the header */
.links-grid{
  grid-column: 1;                    /* left column */
  grid-row: 2;                       /* second row, right below header */
  width: 100%;
  margin: 16px 0 0 0;                /* remove auto-centering */
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 20px;
}

/* On small screens, stack to one per row */
@media (max-width: 900px){
  .side-card{ grid-row: auto; grid-column: auto; }
  .links-grid{ grid-template-columns: 1fr; }
}
        .links-grid{
  grid-column: 1;      /* left column under the header */
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Two columns, same sizing as before */
.featured-links{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Panels (content cards) */
.panel{
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}

.panel.tall{ height: 200px; }                /* matches your previous “tall” size */
.panel h3{ margin: 0 0 10px 0; font-size: 18px; }
.panel p{ margin: 0 0 10px 0; color: var(--muted); }
.panel .bullets{ margin: 0; padding-left: 18px; color: var(--muted); }
.panel .bullets li{ margin: 4px 0; }

/* CTA button in the right panel */
.btn.email-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: 10px;
  border: 2px solid var(--accent); color: var(--text); text-decoration: none;
  font-weight: 600; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn.email-btn:hover{ background: rgba(255,255,255,0.12); transform: translateY(-1px); }

/* Responsive: stack to one column */
@media (max-width: 900px){
  .featured-links{ grid-template-columns: 1fr; }
  .panel.tall{ height: 160px; }
}
        .regular-links{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* force 2 per row */
  gap: 20px;
}

        .cta-panel{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* keep text at top, button at bottom */
}

.cta-panel .btn{
  align-self: center;  /* centers the button horizontally */
  margin-top: auto;    /* pushes it down if you want */
}

        .email-text {
  font-size: 14px;     /* smaller than normal body */
  font-style: italic;
  color: var(--muted); /* softer grey if you want */
  margin: 6px 0;
}

        .site-footer {
  background-color: var(--bg);   /* same dark tone as your cards */
  padding: 16px 0;
  margin-top: 40px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-footer small {
  font-size: 0.85rem;
  color: #9ca3af; /* muted gray like your card text */
}





    </style>