/* ==========================================================================
   Peak Hire Services — Layout: container, sections, grids, reveal
   ========================================================================== */

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:1080px; }

/* --- Sections ------------------------------------------------------------ */
.section{ padding-block:var(--section-y); position:relative; }
.section--lg{ padding-block:var(--section-y-lg); }
.section--sm{ padding-block:var(--section-y-sm); }
.section--ivory{ background:var(--ivory); }
.section--white{ background:var(--white); }
.section--sand { background:var(--bg-sand); }
.section--dark {
  background:var(--midnight);
  color:var(--fg-dark);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Hairline seam between two same-toned sections */
.section--seam{ border-top:1px solid var(--rule); }

/* --- Section heading block ----------------------------------------------- */
.sec-head{ display:flex; flex-direction:column; gap:var(--s4); max-width:62ch; }
.sec-head__label{ display:flex; align-items:center; gap:var(--s3); }
.sec-head__label::before{
  content:""; width:26px; height:1px; background:var(--gold); flex:0 0 26px;
}
.sec-head__lead{ margin-top:var(--s1); }

.sec-head--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:var(--s6);
  align-items:end;
  max-width:none;
}
@media (max-width:860px){
  .sec-head--split{ grid-template-columns:minmax(0,1fr); align-items:start; }
}

/* --- Grids --------------------------------------------------------------- */
.grid{ display:grid; gap:var(--s6); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--editorial{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(32px,5vw,88px); }
.grid--feature   { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); }
@media (max-width:980px){
  .grid--editorial,.grid--feature{ grid-template-columns:minmax(0,1fr); gap:var(--s7); }
}
@media (max-width:760px){
  .grid--2,.grid--3{ grid-template-columns:minmax(0,1fr); }
}

/* --- Rules --------------------------------------------------------------- */
.rule{ height:1px; background:var(--rule); border:0; margin:0; }
.rule--gold{ height:1px; background:var(--gold); border:0; margin:0; }
.rule--dark{ height:1px; background:var(--rule-dark); border:0; margin:0; }

/* --- The Search Arc — used exactly four times site-wide ------------------ */
.arc{
  position:absolute;
  border:1px solid rgba(197,150,55,.24);
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.arc--hero{
  width:min(1120px,105vw); aspect-ratio:1;
  top:-42%; right:-16%; transform:rotate(34deg);
}
.arc--band{
  width:min(1180px,110vw); aspect-ratio:1;
  top:-34%; right:-22%;
  border-color:rgba(197,150,55,.15);
  border-top-color:transparent; border-right-color:transparent;
}
.arc--cta{
  width:min(1500px,150vw); aspect-ratio:1;
  bottom:22%; left:50%; translate:-50% 0;
  border-color:rgba(197,150,55,.16);
  border-left-color:transparent; border-right-color:transparent; border-bottom-color:transparent;
}
.section--dark > .container{ position:relative; z-index:1; }

/* --- Scroll reveal ------------------------------------------------------- */
.reveal{ opacity:1; transform:none; }
.reveal-ready .reveal{ opacity:0; transform:translateY(12px); }
.reveal-ready .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur-sect) ease, transform var(--dur-sect) var(--ease);
}
.reveal-ready .reveal[data-delay="1"].is-in{ transition-delay:90ms; }
.reveal-ready .reveal[data-delay="2"].is-in{ transition-delay:180ms; }
.reveal-ready .reveal[data-delay="3"].is-in{ transition-delay:270ms; }
.reveal-ready .reveal[data-delay="4"].is-in{ transition-delay:360ms; }
.reveal-ready .reveal[data-delay="5"].is-in{ transition-delay:450ms; }
@media (prefers-reduced-motion: reduce){
  .reveal-ready .reveal{ opacity:1; transform:none; }
}