/* ===========================
   Open Works Institute
   Desktop enhancements
   (Loaded only at >= 960px)
   =========================== */

:root{
  --radius: 18px;
  --radius2: 26px;
}

/* Container */
.tpi-container{
  padding: 0 28px;
}

/* Topbar tighter on wide screens */
.tpi-topbar-row{
  padding: 12px 0;
}

/* Header and nav: keep drawer behavior, but improve spacing */
.tpi-header-row{
  padding: 16px 0;
}

.tpi-mark{
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.tpi-brandname{
  font-size: 1.08rem;
}
.tpi-brandtag{
  font-size: 0.92rem;
}

/* Hero spacing */
.tpi-hero{
  padding: 56px 0 44px;
}
.tpi-hero-card{
  padding: 44px 40px;
}

/* Trust strip becomes 4-up */
.tpi-truststrip{
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Sections slightly larger rhythm */
.tpi-section{
  padding: 64px 0;
}
.tpi-section--cta{
  padding: 80px 0;
}

/* Typography bump */
.tpi-h1{
  font-size: 2.5rem;
}
.tpi-h1-sm{
  font-size: 1.6rem;
}
.tpi-lead{
  font-size: 1.08rem;
  max-width: 78ch;
}

/* Common grids */
.tpi-grid{
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Panels */
.tpi-panel{
  padding: 28px 28px;
}
.tpi-cta{
  padding: 44px 40px;
}

/* Contact grid: 3-up */
.tpi-contactgrid{
  grid-template-columns: repeat(3, 1fr);
}

/* Footer layout */
.tpi-footerrow{
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
}
.tpi-footerlinks{
  justify-content: flex-end;
}

/* Nav drawer: keep it functional, but improve look on desktop if opened */
.tpi-navpanel{
  width: 380px;
  padding: 20px 18px 22px;
}

/* Accordion feels more “carded” on desktop */
.tpi-accbtn{
  padding: 16px 16px;
}
.tpi-accpanel{
  padding: 16px 16px;
}

/* Form: two-column feel where appropriate */
.tpi-form{
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
}
.tpi-form .tpi-label,
.tpi-form .tpi-input,
.tpi-form .tpi-select{
  grid-column: span 1;
}
.tpi-form .tpi-textarea{
  grid-column: 1 / -1;
}
.tpi-form .tpi-btn{
  grid-column: 1 / -1;
  justify-self: start;
}

/* Make tiles feel slightly denser */
.tpi-tile{
  padding: 18px 18px;
}

/* Wider screen refinements */
@media (min-width: 1200px){
  .tpi-hero-card{
    padding: 52px 52px;
  }
  .tpi-grid{
    gap: 20px;
  }
  .tpi-panel{
    padding: 34px 34px;
  }
}