/* Dharti Group — nav + footer
   ============================================================ */

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem var(--gutter);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(6,13,28,.85); backdrop-filter:blur(14px);
  padding-top:.8rem; padding-bottom:.8rem; border-bottom-color:var(--line);
}
/* The lockup is stacked and therefore tall; it shrinks as the bar condenses. */
.nav__brand{ display:flex; align-items:center; flex:none; }
.nav__brand img{
  display:block; width:auto; height:56px;
  transition:height .5s var(--ease);
}
.nav.scrolled .nav__brand img{ height:42px; }
@media (max-width:820px){
  .nav__brand img{ height:44px; }
  .nav.scrolled .nav__brand img{ height:38px; }
}
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim); position:relative; padding:.2rem 0; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:2px;
  color:var(--bone); transition:all .4s var(--ease);
}
.nav__cta:hover{ border-color:var(--gold); color:var(--gold-2); }
.nav__menu{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:#04091a; padding:clamp(3rem,6vw,4.5rem) var(--gutter) 1.6rem; border-top:1px solid var(--line); }
.footer__top{
  max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.4rem;
  padding-bottom:2.2rem; border-bottom:1px solid var(--line);
}
.footer__logo{ display:block; width:auto; height:88px; margin-bottom:.2rem; }
.footer__brand{ display:flex; flex-direction:column; gap:.5rem; }
.footer__nav{ display:flex; flex-direction:column; gap:.6rem; }
.footer__nav a{ font-size:.76rem; letter-spacing:.06em; color:var(--bone-dim); transition:color .3s; }
.footer__nav a:hover{ color:var(--gold-2); }
.footer__contact{ font-size:.78rem; line-height:1.75; color:var(--bone-dim); display:flex; flex-direction:column; gap:.8rem; }
.footer__contact a{ transition:color .3s var(--ease); }
.footer__contact a:hover{ color:var(--gold-2); }
.footer__social{ display:flex; gap:1.2rem; }
.footer__social a{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .3s var(--ease); }
.footer__social a:hover{ color:var(--bone); }
.footer__bottom{
  max-width:1160px; margin:0 auto; padding-top:1.2rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:900px){
  .footer__top{ grid-template-columns:1fr; gap:2rem; }
  /* thumb-sized rows on touch screens: same look, taller hit areas */
  .footer__nav{ gap:0; }
  .footer__nav a, .footer__social a{ padding:.7rem 0; }
  .footer__contact a{ display:inline-block; padding:.5rem 0; }
  .footer__bottom{ flex-direction:column; gap:.5rem; }
}
/* ============================================================
   SKIP LINK
   First thing in the tab order on every page. Sits off-screen until it
   takes focus, then drops into the top-left corner.
   ============================================================ */
.skip{
  /* above the homepage intro (z 1000) so a keyboard user never tabs to an
     element they cannot see */
  position:fixed; z-index:1100; top:0; left:var(--gutter);
  transform:translateY(-120%);
  padding:.75rem 1.1rem; border:1px solid var(--gold); border-radius:0 0 2px 2px;
  background:var(--ink); color:var(--gold-2);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; outline:none; }

/* ============================================================
   MOBILE NAV
   The bar wraps: brand and button hold the first row, the links and the
   CTA drop onto rows of their own once .nav--open is set by js/shell.js.
   ============================================================ */
@media (max-width:820px){
  .nav{ flex-wrap:wrap; }
  .nav__links, .nav__cta{ display:none; }
  /* 44px square hit area (WCAG 2.5.5); the negative margin keeps the two
     bars where they sat when the button was only as big as its icon */
  .nav__menu{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer; padding:0;
    min-width:44px; min-height:44px; margin:-10px -10px -10px 0;
  }
  .nav__menu span{
    width:24px; height:1.4px; background:var(--bone); transform-origin:center;
    transition:transform .3s var(--ease), opacity .2s var(--ease);
  }

  .nav--open{
    background:rgba(6,13,28,.97); backdrop-filter:blur(16px);
    border-bottom-color:var(--line);
  }
  .nav--open .nav__links{
    display:flex; flex-direction:column; gap:0;
    flex-basis:100%; order:3;
    margin-top:1rem; padding-top:.4rem; border-top:1px solid var(--line);
    animation:navDrop .3s var(--ease) both;
  }
  .nav--open .nav__links a{
    padding:.95rem 0; font-size:.76rem; letter-spacing:.18em; color:var(--bone);
    border-bottom:1px solid rgba(243,239,230,.07);
  }
  /* the sliding underline is a pointer affordance and reads as an artefact
     on a stacked list, so it goes */
  .nav--open .nav__links a::after{ display:none; }
  .nav--open .nav__links a:hover{ color:var(--gold-2); }
  .nav--open .nav__cta{
    display:inline-flex; justify-content:center;
    flex-basis:100%; order:4; margin:1rem 0 .4rem;
    animation:navDrop .3s var(--ease) .05s both;
  }

  /* the two bars close into a cross */
  .nav--open .nav__menu span:first-child{ transform:translateY(3.2px) rotate(45deg); }
  .nav--open .nav__menu span:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

  @keyframes navDrop{
    from{ opacity:0; transform:translateY(-6px); }
    to  { opacity:1; transform:none; }
  }
}