/* ==========================================================================
   UTILITIES — reusable helper classes shared across multiple components
   ========================================================================== */

/* ---------- Layout container ---------- */
.u-container{
  max-width:118rem;
  margin:0 auto;
  padding:0 3.2rem;
}

/* ---------- Visually hidden (accessible, still present for bots/screen readers) ---------- */
.u-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Eyebrow label ---------- */
.u-eyebrow{
  font-family:var(--sans);
  font-size:1.3rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
}

/* ---------- Brass italic accent (inline text) ---------- */
.u-accent{
  font-style:italic;
  color:var(--brass);
}

/* ---------- Corner-frame "viewfinder" motif ---------- */
.u-viewfinder{
  position:relative;
}
.u-viewfinder::before,
.u-viewfinder::after{
  content:"";
  position:absolute;
  width:2.2rem;
  height:2.2rem;
  border-color:var(--brass);
  border-style:solid;
  opacity:0.85;
}
.u-viewfinder::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.u-viewfinder::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-size:1.4rem;
  letter-spacing:0.02em;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
  cursor:pointer;
}

.btn--primary{
  background:var(--brass);
  color:var(--on-brass);
  padding:1.5rem 3rem;
  font-weight:500;
  border:1px solid var(--brass);
}
.btn--primary:hover{ background:var(--brass-hover); transform:translateY(-0.1rem); }

.btn--ghost{
  color:var(--text);
  border-bottom:1px solid var(--line);
  padding-bottom:0.3rem;
}
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass); }

.btn--select{
  text-align:center;
  padding:1.3rem;
  font-size:1.4rem;
  border:1px solid var(--line);
}
.btn--select:hover{ border-color:var(--brass); color:var(--brass); }

.btn--block{ width:100%; border:none; }

/* ---------- Generic section shell + section head ---------- */
section{ padding:9.6rem 0; }

.u-section-head{ max-width:64rem; margin-bottom:6.4rem; }
.u-section-head .u-eyebrow{ margin-bottom:1.6rem; display:block; }
.u-section-head__title{ font-size:clamp(2.8rem, 4vw, 4.2rem); }
.u-section-head__text{ margin-top:1.8rem; color:var(--text-muted); font-size:1.6rem; }

@media (max-width: 620px){
  section{ padding:8rem 0; }
}