/* ============================================================
   Ahmad Jadoon — fullscreen navigation ("ajnav")
   ------------------------------------------------------------
   Namespaced ajnav-* so neither the legacy .nav-* rules in
   style.css nor the stale duplicate of that file in the
   Customizer's Additional CSS box can reach it.

   The panel never scrolls: it is exactly one viewport tall, and
   assets/nav.js shrinks --ajnav-s until the content fits.
   ============================================================ */

.ajnav-bar,
.ajnav-panel {
  --an-ink:      #0b0816;
  --an-ink-2:    #171232;
  --an-violet:   #6c5ce7;
  --an-violet-2: #a29bfe;
  --an-indigo:   #4834d4;
  --an-cyan:     #22d3ee;
  --an-grad:     linear-gradient(120deg, var(--an-violet), var(--an-indigo) 45%, var(--an-cyan));
  --an-bar-h:    clamp(58px, 8vh, 76px);
  --an-pad:      clamp(16px, 4vw, 54px);
  --ajnav-s:     1;   /* auto-fit multiplier, driven by nav.js */
}

/* ============================================================
   TOP BAR
   ============================================================ */
.ajnav-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1200;
  height: var(--an-bar-h);
  padding-top:30px;
  padding-right:60px;
  display: flex;
  align-items: center;
  transition: background 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease;
}
.ajnav-bar.is-scrolled {
  background: rgba(11, 8, 22, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(162, 155, 254, 0.16);
  padding-left:0px;
  padding-top:8px;
  padding-bottom:20px;
  padding-right:60px;
  min-height:100px;
  max-height:120px;
}
/* While the panel is open the bar sits above it, transparent. */
.ajnav-bar.is-open { background: none; box-shadow: none; backdrop-filter: none; z-index: 1400; }

.ajnav-bar-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--an-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ajnav-logo {
  display: flex; align-items: center;
  flex-shrink: 0;
  margin-left:20px;
  margin-top:15px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-logo img {
  height: clamp(86px, 6.6vh, 86px);
  margin-left:35px;
  width: auto; display: block;
}

.ajnav-bar-right { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); }

/* "Hire Me" — gradient fill sweeps in from the left on hover */
.ajnav-hire {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  margin-top:25px;
  border-radius: 100px;
  font-size: 0.84rem; font-weight: 600;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(162, 155, 254, 0.45);
}
.ajnav-hire::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--an-grad);
  background-size: 200% 100%;
  animation: anSheen 6s linear infinite;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-hire-arr { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ── Toggle ── */
.ajnav-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 18px;
  margin-top:25px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(162, 155, 254, 0.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: inherit;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
/* The label cross-fades between Menu and Close without changing width */
.ajnav-toggle-txt { position: relative; display: grid; }
.ajnav-toggle-txt > span {
  grid-area: 1 / 1;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-toggle-close { opacity: 0; transform: translateY(7px); }
.ajnav-bar.is-open .ajnav-toggle-open { opacity: 0; transform: translateY(-7px); }
.ajnav-bar.is-open .ajnav-toggle-close { opacity: 1; transform: none; }

.ajnav-toggle-icon {
  position: relative;
  width: 17px; height: 12px;
  flex-shrink: 0;
}
.ajnav-toggle-icon i {
  position: absolute; left: 0;
  width: 100%; height: 1.8px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s ease;
}
.ajnav-toggle-icon i:nth-child(1) { top: 1px; }
.ajnav-toggle-icon i:nth-child(2) { bottom: 1px; width: 68%; }
.ajnav-bar.is-open .ajnav-toggle-icon i:nth-child(1) { transform: translateY(4.2px) rotate(45deg); }
.ajnav-bar.is-open .ajnav-toggle-icon i:nth-child(2) { width: 100%; transform: translateY(-4.2px) rotate(-45deg); }

/* A ring that keeps turning around the toggle */
.ajnav-toggle-ring {
  position: absolute; inset: -3px;
  border-radius: 100px;
  border: 1px solid transparent;
  border-top-color: var(--an-violet-2);
  border-right-color: rgba(34, 211, 238, 0.6);
  opacity: 0.75;
  animation: anRing 4.5s linear infinite;
  pointer-events: none;
}

/* ============================================================
   FULLSCREEN PANEL
   ============================================================ */
.ajnav-panel {
  position: fixed;
  inset: 0;
  z-index: 1300;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;                 /* the panel must never scroll */
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(var(--an-bar-h) + clamp(30px, 2vh, 26px)) clamp(105px, 4vw, 54px) clamp(14px, 2.4vh, 26px);
  background: radial-gradient(125% 120% at 78% 4%, #241b4d 0%, var(--an-ink-2) 45%, var(--an-ink) 100%);
  color: #fff;
  visibility: hidden;
  pointer-events: none;
  /* Opens as a circle growing out of the toggle button. */
  clip-path: circle(0% at var(--an-x, 92%) var(--an-y, 38px));
  transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.72s;
}
.ajnav-panel.is-open {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(150% at var(--an-x, 92%) var(--an-y, 38px));
  transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

/* While measuring, force the settled state so the entrance transforms cannot
   distort the reading. Applied and removed inside one frame, so it never paints. */
.ajnav-panel.is-measuring .ajnav-link,
.ajnav-panel.is-measuring .ajnav-svc,
.ajnav-panel.is-measuring .ajnav-foot {
  transition: none !important;
  transition-delay: 0s !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Ambient layers */
.ajnav-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ajnav-orb { position: absolute; border-radius: 50%; filter: blur(76px); }
.ajnav-orb-1 {
  width: 42vw; aspect-ratio: 1; top: -14%; right: -6%; opacity: 0.6;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.9), transparent 68%);
  animation: anOrbA 20s ease-in-out infinite;
}
.ajnav-orb-2 {
  width: 34vw; aspect-ratio: 1; bottom: -18%; left: -8%; opacity: 0.5;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.75), transparent 68%);
  animation: anOrbB 26s ease-in-out infinite;
}
.ajnav-grid {
  position: absolute; inset: -50% -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  animation: anGrid 40s linear infinite;
}
.ajnav-ring {
  position: absolute;
  width: min(52vw, 560px); aspect-ratio: 1;
  top: 50%; right: -10%; margin-top: min(-26vw, -280px);
  border: 1px dashed rgba(162, 155, 254, 0.18);
  border-radius: 50%;
  animation: anRing 54s linear infinite;
}
.ajnav-spark {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 10px 2px rgba(162, 155, 254, 0.7);
  top: calc(12% + var(--i) * 14%);
  left: calc(8% + var(--i) * 15%);
  opacity: 0;
  animation: anFloat calc(10s + var(--i) * 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.7s);
}

/* ── Layout ── */
.ajnav-panel-inner {
  position: relative; z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 4vw, 72px);
  align-content: center;
  align-items: center;
}

/* ── Primary links: dual-layer text swap on hover ── */
.ajnav-primary { display: flex; flex-direction: column; gap: calc(var(--ajnav-s) * clamp(3px, 1vh, 12px)); }

.ajnav-link {
  position: relative;
  display: flex; align-items: baseline; gap: clamp(10px, 1.6vw, 20px);
  padding: calc(var(--ajnav-s) * clamp(5px, 1.1vh, 13px)) 0;
  color: #fff;
  text-decoration: none;
  /* staggered entrance, driven by --n */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-panel.is-open .ajnav-link {
  opacity: 1; transform: none;
  transition-delay: calc(0.22s + var(--n) * 0.06s);
}
.ajnav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--an-violet-2), var(--an-cyan), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-idx {
  font-family: var(--font-mono, monospace);
  font-size: calc(var(--ajnav-s) * clamp(0.6rem, 1.05vh, 0.8rem));
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.36);
  transition: color 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The swap: label A slides up and out, gradient clone B slides up into place */
.ajnav-swap {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.02;
  font-family: var(--font-display, Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: calc(var(--ajnav-s) * min(clamp(2.2rem, 4.8vw, 5.4rem), 11.5vh));
}
.ajnav-swap-a,
.ajnav-swap-b { display: block; transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1); }
.ajnav-swap-b {
  position: absolute; inset: 0;
  transform: translateY(105%);
  background: linear-gradient(96deg, var(--an-violet-2), var(--an-cyan) 55%, var(--an-violet-2));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: anSheen 6s linear infinite;
}
.ajnav-link-arr {
  font-size: calc(var(--ajnav-s) * clamp(0.9rem, 1.8vh, 1.3rem));
  color: var(--an-cyan);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Services ── */
.ajnav-services { min-width: 0; }
.ajnav-heading {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: calc(var(--ajnav-s) * clamp(8px, 1.6vh, 18px));
  font-family: var(--font-mono, monospace);
  font-size: calc(var(--ajnav-s) * clamp(0.6rem, 1.1vh, 0.78rem));
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--an-violet-2);
}
.ajnav-heading::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(162, 155, 254, 0.45), transparent);
}

.ajnav-grid-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--ajnav-s) * clamp(4px, 1.1vh, 14px)) clamp(12px, 1.8vw, 26px);
}
.ajnav-svc {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: calc(var(--ajnav-s) * clamp(10px, 2.3vh, 24px)) clamp(12px, 1.4vw, 18px);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
.ajnav-panel.is-open .ajnav-svc {
  opacity: 1; transform: none;
  transition-delay: calc(0.34s + var(--n) * 0.028s);
}
/* gradient wipe from the left */
.ajnav-svc::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, rgba(108, 92, 231, 0.85), rgba(34, 211, 238, 0.5));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-svc-name {
  font-size: calc(var(--ajnav-s) * min(clamp(0.9rem, 1.42vw, 1.22rem), 3vh));
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ajnav-svc-price {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: calc(var(--ajnav-s) * min(0.7rem, 1.7vh));
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.35s ease;
}

/* ── Foot ── */
.ajnav-foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 24px);
  padding-top: clamp(10px, 1.8vh, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease 0.5s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}
.ajnav-panel.is-open .ajnav-foot { opacity: 1; transform: none; }

.ajnav-foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.ajnav-foot-link,
.ajnav-foot-loc {
  font-size: calc(var(--ajnav-s) * min(0.8rem, 1.9vh));
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ajnav-foot-link { position: relative; }
.ajnav-foot-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: var(--an-cyan);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ajnav-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ajnav-chip {
  padding: 7px 14px;
  border-radius: 100px;
  font-size: calc(var(--ajnav-s) * min(0.72rem, 1.7vh));
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-foot-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  border-radius: 100px;
  font-size: calc(var(--ajnav-s) * min(0.78rem, 1.8vh));
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--an-grad);
  background-size: 200% 100%;
  animation: anSheen 6s linear infinite;
  box-shadow: 0 12px 30px -12px rgba(108, 92, 231, 0.9);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ajnav-foot-arr { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* Filled controls keep white text in every state — Astra colours
   buttons and links on hover and would otherwise repaint these. */
.ajnav-bar a.ajnav-hire, .ajnav-bar a.ajnav-hire:hover, .ajnav-bar a.ajnav-hire:focus, .ajnav-bar a.ajnav-hire:visited,
.ajnav-panel a.ajnav-foot-cta, .ajnav-panel a.ajnav-foot-cta:hover, .ajnav-panel a.ajnav-foot-cta:focus, .ajnav-panel a.ajnav-foot-cta:visited,
.ajnav-panel a.ajnav-link, .ajnav-panel a.ajnav-link:hover, .ajnav-panel a.ajnav-link:focus, .ajnav-panel a.ajnav-link:visited { color: #fff; }
.ajnav-bar button.ajnav-toggle,
.ajnav-bar button.ajnav-toggle:hover,
.ajnav-bar button.ajnav-toggle:focus,
.ajnav-bar button.ajnav-toggle:active {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: none;
}

/* ============================================================
   Hover — pointer devices only
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .ajnav-logo:hover { transform: scale(1.05) rotate(-2deg); }
  .ajnav-hire:hover::before { transform: scaleX(1); }
  .ajnav-hire:hover .ajnav-hire-arr { transform: translateX(4px); }
  .ajnav-bar button.ajnav-toggle:hover { background: rgba(255, 255, 255, 0.14); }

  .ajnav-link:hover::after { transform: scaleX(1); }
  .ajnav-link:hover .ajnav-swap-a { transform: translateY(-105%); }
  .ajnav-link:hover .ajnav-swap-b { transform: translateY(0); }
  .ajnav-link:hover .ajnav-idx { color: var(--an-cyan); transform: translateY(-3px); }
  .ajnav-link:hover .ajnav-link-arr { opacity: 1; transform: translateX(0); }

  .ajnav-svc:hover { color: #fff; }
  .ajnav-svc:hover::before { transform: scaleX(1); }
  .ajnav-svc:hover .ajnav-svc-price { color: rgba(255, 255, 255, 0.9); }

  .ajnav-foot-link:hover { color: #fff; }
  .ajnav-foot-link:hover::after { transform: scaleX(1); transform-origin: left; }
  .ajnav-chip:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--an-cyan); transform: translateY(-2px); }
  .ajnav-foot-cta:hover { transform: translateY(-2px); }
  .ajnav-foot-cta:hover .ajnav-foot-arr { transform: translateX(4px); }
}

/* Keyboard focus stays visible */
.ajnav-panel a:focus-visible,
.ajnav-bar a:focus-visible,
.ajnav-bar button:focus-visible {
  outline: 2px solid var(--an-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes anSheen { to { background-position: 200% 0; } }
@keyframes anRing  { to { transform: rotate(1turn); } }
@keyframes anGrid  { to { transform: translate(62px, 62px); } }
@keyframes anOrbA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(7%, 9%) scale(1.14); }
  66%      { transform: translate(-4%, 5%) scale(0.93); }
}
@keyframes anOrbB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-8%, -8%) scale(1.16); }
  75%      { transform: translate(4%, -3%) scale(0.9); }
}
@keyframes anFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  14%      { opacity: 0.9; }
  50%      { transform: translate(24px, -34px); opacity: 0.6; }
  86%      { opacity: 0.45; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .ajnav-panel-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 2.6vh, 30px);
    align-content: center;
  }
  .ajnav-primary { flex-direction: row; flex-wrap: wrap; gap: 6px clamp(14px, 3vw, 30px); }
  .ajnav-link { padding: 4px 0; }
  .ajnav-swap { font-size: calc(var(--ajnav-s) * min(clamp(1.35rem, 6.4vw, 2.2rem), 5.6vh)); }
  .ajnav-link-arr { display: none; }
}
@media (max-width: 620px) {
  .ajnav-hire { display: none; }              /* the panel foot carries the CTA */
  .ajnav-primary { gap: 4px clamp(12px, 4vw, 22px); }
  .ajnav-idx { display: none; }
  .ajnav-grid-links { gap: calc(var(--ajnav-s) * 10px) 8px; margin-right:-60px; }
  .ajnav-svc { padding: calc(var(--ajnav-s) * 7px) 9px; align-items: center; }
  .ajnav-svc-price { display: none; }         /* names stay readable at 2 columns */
  /* Wrap rather than truncate -- auto-fit absorbs the extra height. */
  .ajnav-svc-name { font-size:15px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.95; margin-left:-8px; }
  .ajnav-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ajnav-foot-loc { display: none; }
  .ajnav-orb { filter: blur(52px); }
  .ajnav-spark, .ajnav-ring { display: none; }
  .ajnav-swap { font-size: calc(var(--ajnav-s) * min(clamp(0.35rem, 5.4vw, 1.25rem), 4.6vh)); }
  .ajnav-foot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ajnav-chip { padding: 8px 18px 8px 18px; border-radius: 100px; font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top:10px; margin-bottom:10px; }
  .ajnav-foot-cta { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 100px; font-size:15px; font-weight: 600; color: #fff; text-decoration: none; background: var(--an-grad); background-size: 200% 100%; animation: anSheen 6s linear infinite; box-shadow: 0 12px 30px -12px rgba(108, 92, 231, 0.9); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
}
}
/* Short landscape phones — the auto-fit handles the rest */
@media (max-height: 480px) {
  .ajnav-panel-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
  .ajnav-primary { flex-direction: column; }
  .ajnav-foot-contact { display: none; }
}

/* ============================================================
   Reduced motion — the panel still opens, just without theatre
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ajnav-bar *, .ajnav-panel * { animation: none !important; }
  .ajnav-panel {
    clip-path: none !important;
    opacity: 0;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
  }
  .ajnav-panel.is-open { opacity: 1; transition: opacity 0.2s linear, visibility 0s; }
  .ajnav-link, .ajnav-svc, .ajnav-foot { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

@media print { .ajnav-bar, .ajnav-panel { display: none !important; } }

/* ============================================================
   MOBILE HEADER
   ------------------------------------------------------------
   Appended deliberately at the end of the file and wrapped in a
   media query, so every rule above -- including the hand-tuned
   desktop bar, logo and panel padding -- is left exactly as is.
   Nothing here applies above 768px.

   The desktop values are absolute (86px logo, 60px bar padding,
   105px panel gutters) rather than fluid, so on a narrow screen
   they leave almost no room. These reset them to phone-scale.
   ============================================================ */
@media (max-width: 768px) {

  /* Bar: drop the desktop offsets, keep it the height of the token. */
  .ajnav-bar {
    height: var(--an-bar-h);
    padding-top: 0;
    padding-right: 0;
  }
  .ajnav-bar.is-scrolled {
    height: var(--an-bar-h);
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  .ajnav-bar-inner { padding: 0 clamp(14px, 4.5vw, 22px); }

  /* Logo: fluid again, and sized to sit inside the bar. */
  .ajnav-logo { margin-left: 0; margin-top: 0; }
  .ajnav-logo img {
    height: clamp(38px, 9vw, 52px);
    margin-left: 0;
  }

  /* Controls sit centred in the bar rather than nudged down. */
  .ajnav-hire,
  .ajnav-toggle { margin-top: 0; }
  .ajnav-toggle { padding: 8px 14px 8px 16px; font-size: 0.7rem; gap: 8px; }

  /* Panel: real gutters instead of the 105px desktop ones, and a
     tighter top offset so the menu keeps its vertical room. */
  .ajnav-panel {
    padding: calc(var(--an-bar-h) + clamp(10px, 2vh, 18px))
             clamp(16px, 5.5vw, 30px)
             clamp(14px, 2.4vh, 26px);
  }
}

/* Very small phones — trim the toggle so the bar never crowds. */
@media (max-width: 400px) {
  .ajnav-toggle { padding: 7px 12px 7px 14px; font-size: 0.66rem; letter-spacing: 0.08em; }
  .ajnav-toggle-icon { width: 15px; }
  .ajnav-logo img { height: clamp(56px, 10vw, 46px); }
}