:root{ --trescoblue:#0077c8; --trescogray:#a7a8aa; --bg:#f8fafc; --line:#e2e8f0; }
  body { font-family: system-ui, sans-serif; margin:0; background: white;}
  .container { display:flex; flex-wrap: nowrap; justify-content: space-evenly;}
  .row { flex:90%; flex-direction: row; display: flex; margin:8px auto; align-items:stretch;}
  .flex-left { flex:66%; }
  .flex-right { flex:34%; }
  .main-content { background: var(--bg); }
  h1,h2 { margin-bottom: .5rem; margin-top: 0;}
  .grid { display: grid; gap: .5rem; }
  a { text-decoration: none; padding: .5rem .75rem; border: 1px solid #ddd; border-radius: .5rem; display:block; margin:.5rem; color:white;}
  a:hover { background: white; color: var(--trescoblue); }
  .header{padding-top:20px; padding-bottom:20px;}
  .header-logo{flex-grow: 4; font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; font-size:2rem; padding:8px;}
  .header-text{flex-grow: 8; padding:8px;}
  .doc-list { background-color: var(--trescoblue); border-radius:8px; margin:8px; padding:8px; color:white;}
  .footer{text-align:center; color: black;}
  .mainbg{padding:250px 8px 8px 8px; background:linear-gradient(180deg, rgba(255,255,255, .15), rgba(255,255,255, .85) 35%,rgba(255,255,255,.98) 70%), url('../../assets/images/tresco-showroom-slider.jpg') top center / cover no-repeat; filter:grayscale(10%); opacity:.9;}
@media (max-width: 800px) {
  .container,.row {
    flex-direction: column;
  }
  .flex-left, .flex-right;{ flex 100%; }
  .header-logo{flex-grow: 6;}
  .header-text{flex-grow: 6;}
}