main{
  width:100%;
}

/* ============================
   GLOBAL PAGE CONTAINER
============================ */

.page-container{
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:clamp(1rem,3vw,120px);
}

.page-container-wide{
  width:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:clamp(1rem,3.5vw,120px);
}

/* ============================
   SECTION STRUCTURE
============================ */

.section{
  padding:var(--space-lg) 0;
}

.section-lg{
  padding:var(--space-xl) 0;
}

.section-xl{
  padding:var(--space-xxl) 0;
}

/* ============================
   UNIVERSAL CONTENT LAYOUT
============================ */
.align-start,
.align-center,
.align-end{
  display:flex;
}

.align-start{
  justify-content:flex-start;
}

.align-center{
  justify-content:center;
}

.align-end{
  justify-content:flex-end;
}

.align-start .page-container,
.align-end .page-container,
.align-center .page-container,
.align-start .page-container-wide,
.align-end .page-container-wide,
.align-center .page-container-wide{
  display:flex;
  flex-direction:column;
}

.layout-default{
  text-align:left;
  align-items:flex-start;
}

.layout-center{
  text-align:center;
  align-items:center;
}



/* ============================
   VERTICAL ALIGNMENT UTILITIES
============================ */
.valign-bottom{
  align-items:flex-end;
  padding-bottom:0;
}

.valign-bottom .page-container{
  padding-bottom:3rem;
}

/* SAFE CENTER ALIGN */
.valign-center{
  align-items:center;
}

.valign-center .page-container{
  padding-top:3rem;
  padding-bottom:3rem;
}

/* SAFE TOP ALIGN */
.valign-top{
  align-items:flex-start;
  padding-top:3rem;
}

.valign-top .page-container{
  padding-top:3rem;
}



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

.header-hidden{
  transform:translateY(-100%);
}

.header-inner{
  max-width:var(--max-width);
  margin:10px auto;              
  padding:0 20px;               

  height:100px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative;

  border-radius:0;               /* initial flat */

  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease,
    border-radius 0.3s ease;
}

/* =================================================
   FOOTER
================================================= */

.footer-inner{
  max-width:var(--max-width);
  margin:0 auto;

  display:flex;
  justify-content:space-between;
  align-items:center;

  gap:2rem;
}