/* ==========================================================================
   Peak Hire Services — Components: header, footer, buttons, marks
   ========================================================================== */

/* --- Apex mark: derived from the gold Λ in the PEAK wordmark -------------- */
.apex{
  width:9px; height:9px; flex:0 0 9px; position:relative; display:inline-block;
  margin-top:.52em;
}
.apex::before{
  content:""; position:absolute; inset:0;
  border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold);
  transform:rotate(45deg) scale(.82); transform-origin:center;
}
.apex--blue::before{ border-color:var(--blue); }

.list-apex{ display:flex; flex-direction:column; gap:var(--s3); }
.list-apex li{ display:flex; gap:var(--s3); align-items:flex-start; line-height:1.55; }
.list-apex--tight li{ font-size:var(--t-small); }
.list-apex--cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s6);
}
@media (max-width:560px){ .list-apex--cols{ grid-template-columns:1fr; } }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:54px; padding:0 26px;
  border:1px solid transparent; border-radius:var(--radius);
  font-size:15px; font-weight:600; letter-spacing:.012em; line-height:1;
  transition:background var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease),
             color var(--dur-micro) var(--ease),
             box-shadow var(--dur-micro) var(--ease);
  white-space:nowrap;
}
.btn__arrow{ transition:transform var(--dur-micro) var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn--primary{ background:var(--ink-navy); color:#fff; }
.btn--primary:hover{ background:var(--midnight); box-shadow:inset 0 -2px 0 var(--gold); }

.btn--gold{ background:var(--gold); color:#1A1206; }
.btn--gold:hover{ background:var(--gold-light); box-shadow:inset 0 -2px 0 rgba(26,18,6,.55); }

.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--mist); }
.btn--ghost:hover{ border-color:var(--gold); }

.btn--ghost-dark{ background:transparent; color:var(--fg-dark); border-color:rgba(214,222,231,.32); }
.btn--ghost-dark:hover{ border-color:var(--gold); color:#fff; }

.btn--text{
  min-height:auto; padding:0; position:relative; gap:9px;
  font-size:15px; color:var(--fg);
}
.btn--text::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-comp) var(--ease);
}
.btn--text:hover::after{ transform:scaleX(1); }
.on-dark .btn--text{ color:var(--fg-dark); }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s4); align-items:center; }

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h-sm);
  display:flex; align-items:center;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--rule);
  backdrop-filter:saturate(150%) blur(8px);
  transition:height var(--dur-comp) var(--ease),
             background var(--dur-comp) var(--ease),
             border-color var(--dur-comp) var(--ease);
}
.site-header .container{ display:flex; align-items:center; gap:var(--s6); width:100%; }

/* At the top of a page with a dark hero: transparent, pale marks */
.at-top .site-header{
  height:var(--header-h);
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
}
/* BFSI page keeps a navy header at all times */
.site-header--pinned-dark{
  background:rgba(10,18,29,.96);
  border-bottom-color:rgba(197,150,55,.22);
}

/* Brand lockup: two direct crops of the approved artwork */
.brand{ display:flex; align-items:center; gap:13px; flex:0 0 auto; position:relative; }
.brand__emblem{ height:32px; width:auto; transition:height var(--dur-comp) var(--ease); }
.brand__divider{
  width:1px; height:24px; background:rgba(197,150,55,.5);
  transition:height var(--dur-comp) var(--ease);
}
.brand__wordmark{ height:28px; width:auto; transition:height var(--dur-comp) var(--ease); }
.at-top .brand__emblem{ height:36px; }
.at-top .brand__wordmark{ height:32px; }
.at-top .brand__divider{ height:28px; }

/* Light/dark crop pair, cross-faded rather than swapped */
.brand__pair{ position:relative; display:block; }
.brand__pair img{ display:block; }
.brand__pair img + img{ position:absolute; inset:0; }
.brand__light{ opacity:1; transition:opacity var(--dur-micro) var(--ease); }
.brand__dark { opacity:0; transition:opacity var(--dur-micro) var(--ease); }
.at-top .brand__light{ opacity:0; }
.at-top .brand__dark { opacity:1; }
.site-header--pinned-dark .brand__light{ opacity:0; }
.site-header--pinned-dark .brand__dark { opacity:1; }

/* Navigation */
.nav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,34px); margin-left:auto; }
.nav__link{
  position:relative; font-size:14.5px; font-weight:500; letter-spacing:.005em;
  color:var(--ink-navy); padding-block:6px;
  transition:color var(--dur-micro) var(--ease);
}
.at-top .nav__link{ color:var(--fg-dark); }
.site-header--pinned-dark .nav__link{ color:var(--fg-dark); }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform 240ms var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }

.header-cta{
  margin-left:var(--s5); min-height:44px; padding:0 20px; font-size:13.5px;
  background:var(--ink-navy); color:#fff; border-color:var(--ink-navy);
}
.at-top .header-cta{ background:transparent; color:var(--fg-dark); border-color:rgba(214,222,231,.32); }
.at-top .header-cta:hover{ border-color:var(--gold); background:transparent; }
.site-header--pinned-dark .header-cta{
  background:transparent; color:var(--fg-dark); border-color:rgba(214,222,231,.32);
}

/* Mobile menu control */
.nav-toggle{
  display:none; margin-left:auto; width:48px; height:48px;
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.nav-toggle__bar{
  display:block; width:22px; height:1.5px; background:var(--ink-navy);
  transition:transform 300ms var(--ease), opacity 200ms var(--ease), background var(--dur-comp) var(--ease);
}
.at-top .nav-toggle__bar{ background:var(--fg-dark); }
.site-header--pinned-dark .nav-toggle__bar{ background:var(--fg-dark); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:var(--fg-dark); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

@media (max-width:1119px){
  .nav,.header-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* Mobile panel — full screen, not a drawer */
.mobile-panel{
  position:fixed; inset:0; z-index:99;
  background:var(--midnight);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 24px) var(--gutter) calc(var(--s7) + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-8px);
  /* visibility flips instantly on open (so the first link is focusable at
     once) and is delayed on close (so the fade-out is still seen). */
  transition:opacity 280ms var(--ease), transform 280ms var(--ease),
             visibility 0s linear 280ms;
}
.mobile-panel.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s;
}
.mobile-panel__nav{ display:flex; flex-direction:column; }
.mobile-panel__link{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; font-family:var(--serif); font-size:22px; color:var(--fg-dark);
  border-bottom:1px solid rgba(214,222,231,.13);
}
.mobile-panel__link[aria-current="page"]{ color:var(--gold-light); }
.mobile-panel__link .apex{ margin-top:0; opacity:.55; }
.mobile-panel__foot{ margin-top:auto; padding-top:var(--s7); display:flex; flex-direction:column; gap:var(--s5); }
.mobile-panel__foot .btn{ width:100%; justify-content:center; }
.mobile-panel__meta{ font-size:14px; color:var(--fg-dark-soft); line-height:1.7; }
.mobile-panel__meta a:hover{ color:var(--gold-light); }

/* --- Footer -------------------------------------------------------------- */
.site-footer{ background:var(--midnight); color:var(--fg-dark); padding-block:var(--s9) var(--s7); }
.site-footer__top{
  display:grid; grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  gap:var(--s7) var(--s6);
}
@media (max-width:980px){ .site-footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .site-footer{ padding-block:var(--s8) var(--s6); }
  .site-footer__top{ grid-template-columns:1fr 1fr; gap:var(--s6) var(--s5); }
  .site-footer__brand{ grid-column:1 / -1; gap:var(--s4); }
  .site-footer__base{ margin-top:var(--s6); }
  .footer-col__list{ gap:9px; }
}

.site-footer__brand{ display:flex; flex-direction:column; gap:var(--s5); }
.site-footer__lockup{ display:flex; align-items:center; gap:14px; }
.site-footer__lockup .brand__emblem{ height:46px; }
.site-footer__lockup .brand__wordmark{ height:30px; }
.site-footer__tagline{ height:13px; width:auto; opacity:.85; }
.site-footer__positioning{ font-size:14.5px; color:var(--fg-dark-soft); max-width:34ch; line-height:1.65; }

.footer-col__title{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:var(--s4);
}
.footer-col__list{ display:flex; flex-direction:column; gap:11px; }
.footer-col__list a,.footer-col__list span{
  font-size:14.5px; color:var(--fg-dark-soft); line-height:1.5;
  transition:color var(--dur-micro) var(--ease);
}
.footer-col__list a:hover{ color:var(--fg-dark); }

.site-footer__base{
  margin-top:var(--s8); padding-top:var(--s5);
  border-top:1px solid rgba(214,222,231,.13);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:center;
  justify-content:space-between;
}
.site-footer__base p,.site-footer__base a{ font-size:13.5px; color:var(--fg-dark-soft); }
.site-footer__legal{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.site-footer__legal a:hover{ color:var(--fg-dark); }

/* --- Closing CTA — shared across every page ----------------------------- */
.closing{ text-align:center; padding-block:var(--section-y-lg); }
.closing .container{ display:flex; flex-direction:column; align-items:center; gap:var(--s6); }
.closing__rule{ width:56px; height:1px; background:var(--gold); }
.closing__title{ color:#F3F5F8; max-width:21ch; text-wrap:balance; }
.closing__lead{ color:#9FADBB; font-size:var(--t-lead); max-width:42ch; }
.closing .btn{ margin-top:var(--s2); }
.closing__contact{ margin-top:var(--s5); font-size:14.5px; color:var(--fg-dark-soft); }
.closing__contact a{ color:var(--gold-light); }
.closing__contact a:hover{ text-decoration:underline; text-underline-offset:3px; }