/* ================================================================
   TOKENS + COMPONENT SYSTEM  ·  Midnight Acid, agency palette for
   azeemhussain.com, locked 2026-08-09.
   Re-derived from the green system (studio.azeemhussain.pk 2026);
   variable names unchanged, only the four color primitive values
   and this measured table changed.

   MEASURED CONTRAST RATIOS (WCAG 2.x relative luminance math,
   computed 2026-08-09 with a node script, tints composited over
   their band color before measuring):

     ink #0B0B10 on bone #F2F2ED (full strength) ... 17.48 : 1  AAA
     bone #F2F2ED on ink #0B0B10 (full strength) ... 17.48 : 1  AAA
     ink @ 60% tint on bone (mono body floor) ...... 5.00 : 1   AA pass
     ink @ 65% tint on bone .......................... 5.96 : 1  AA pass
     ink @ 70% tint on bone (.type-body--60) ......... 7.13 : 1  AAA
     ink @ 80% tint on bone (.type-body--70) ........ 10.22 : 1  AAA
     ink @ 88% tint on bone (DEFAULT BODY) .......... 13.30 : 1  AAA
     bone @ 60% tint on ink (mono body floor) ....... 6.60 : 1  AA pass
     bone @ 65% tint on ink .......................... 7.60 : 1  AAA
     bone @ 70% tint on ink (.type-body--60) ......... 8.70 : 1  AAA
     bone @ 80% tint on ink (.type-body--70) ........ 11.21 : 1  AAA
     bone @ 88% tint on ink (DEFAULT BODY) .......... 13.51 : 1  AAA
     accent-dark #C8F031 on ink ..................... 14.93 : 1 AAA
     accent-dark #C8F031 on bone .................... 1.17 : 1  FAILS,
                                    never use the acid as text on a
                                    light band, use accent-light
     accent-light #4A6309 on bone ................... 6.07 : 1  AA pass
     accent-light #4A6309 on white .................. 6.82 : 1  AA pass
     ink text on accent-dark button fill ............ 14.93 : 1 AAA
     white text on accent-dark button fill .......... 1.32 : 1  FAILS,
                                    accent buttons always carry INK text

   TUNING NOTES:
     All tint floors carried over from the green system still pass
     with the Midnight Acid hexes (mono body floor ink @ 60% on bone
     measures 5.00:1), so no floor percentage was raised.

     2026-08-09, Option A. Default body moved 65% to 88%, and the two
     muted variants moved up one step each (.type-body--70 now paints
     at 80%, .type-body--60 now paints at 70%) so the hierarchy still
     reads under the brighter body. Class names were left unchanged so
     no markup edit was needed. Card border moved 10% to 18%. Card fill
     stays at 5%. Every text row above clears AA. The 18% card border
     is non-text UI and sits below the 3:1 non-text guidance at
     1.60:1 on ink and 1.49:1 on bone, a deliberate quiet-edge choice.

   NO LITERAL GREYS. Every muted tone in this system is an opacity
   tint of ink or bone via color-mix, mirroring the /70 /10 /5 tint
   discipline of the source system.
   ================================================================ */

:root {
  /* -------- color primitives -------- */
  --ink: #0B0B10;            /* dark band canvas, midnight near-black       */
  --bone: #F2F2ED;           /* light band canvas, warm paper off-white     */
  --accent-dark: #C8F031;    /* acid, accent ON DARK bands only             */
  --accent-light: #4A6309;   /* acid-deep twin, accent ON LIGHT bands       */
  --white: #fff;             /* card surface on light bands                 */

  /* -------- type -------- */
  --font-display: 'Montserrat', 'Avenir Next', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* -------- scale -------- */
  --text-display: clamp(2.5rem, 7.5vw, 6rem);      /* hero, up to text-8xl */
  --text-h2: clamp(1.875rem, 4vw, 3rem);
  --text-h3: 1.5rem;
  --text-body: 0.875rem;
  --text-body-lg: 1rem;
  --text-eyebrow: 0.75rem;
  --track-widest: 0.12em;

  /* -------- shape + motion -------- */
  --radius-card: 0.25rem;    /* tiny, deliberate */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-pill: 0 0 16px color-mix(in srgb, var(--ink) 30%, transparent);
}

/* ================================================================
   BAND CONTEXT SYSTEM
   Each full-width band sets its own foreground, background and
   accent. Components below only ever reference the context vars,
   so every component works on both bands automatically.
   ================================================================ */

.band {
  background: var(--band-bg);
  color: var(--band-fg);
}
.band--ink {
  --band-bg: var(--ink);
  --band-fg: var(--bone);
  --band-accent: var(--accent-dark);
}
.band--bone {
  --band-bg: var(--bone);
  --band-fg: var(--ink);
  --band-accent: var(--accent-light);
}

/* opacity tints of the current band foreground, the whole grey system */
.band {
  --fg-88: color-mix(in srgb, var(--band-fg) 88%, transparent);
  --fg-80: color-mix(in srgb, var(--band-fg) 80%, transparent);
  --fg-70: color-mix(in srgb, var(--band-fg) 70%, transparent);
  --fg-65: color-mix(in srgb, var(--band-fg) 65%, transparent);
  --fg-60: color-mix(in srgb, var(--band-fg) 60%, transparent);
  --fg-40: color-mix(in srgb, var(--band-fg) 40%, transparent);
  --fg-30: color-mix(in srgb, var(--band-fg) 30%, transparent);
  --fg-20: color-mix(in srgb, var(--band-fg) 20%, transparent);
  --fg-18: color-mix(in srgb, var(--band-fg) 18%, transparent);
  --fg-10: color-mix(in srgb, var(--band-fg) 10%, transparent);
  --fg-5:  color-mix(in srgb, var(--band-fg) 5%, transparent);
}

/* hairline between two consecutive same-color bands */
.band--hairline { border-top: 1px solid var(--fg-10); }

.band-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
@media (min-width: 768px) { .band-inner { padding: 7rem 1.5rem; } }

/* ================================================================
   TYPE
   ================================================================ */

.type-display,
.type-h2,
.type-h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.type-display { font-size: var(--text-display); }
.type-h2 { font-size: var(--text-h2); line-height: 1.1; }
.type-h3 { font-size: var(--text-h3); line-height: 1.2; }
.type-accent-line { color: var(--band-accent); }

.type-body {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--fg-88);
  margin: 0;
}
.type-body--lg { font-size: var(--text-body-lg); }
/* the two muted variants stay QUIETER than body, but body is now 88 percent,
   so each was raised one step to keep the hierarchy readable. Class names
   are unchanged on purpose so no markup edit is needed. */
.type-body--70 { color: var(--fg-80); }
.type-body--60 { color: var(--fg-70); }

.type-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--band-accent);
  margin: 0;
}
.type-eyebrow--muted { color: var(--fg-40); }

/* ================================================================
   THE ONE CARD
   Same skeleton for service, price, case-study and blog uses;
   only the eyebrow slot changes meaning (category, PRICE, result,
   topic). 5% tint fill, 2px 10% tint border, tiny radius,
   hover lift -4px + accent border.
   ================================================================ */

.card {
  display: block;
  position: relative;
  background: var(--fg-5);
  border: 2px solid var(--fg-18);
  border-radius: var(--radius-card);
  padding: 2rem;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, border-color 0.3s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--band-accent);
}
.card .type-eyebrow { margin-bottom: 0.75rem; }
.card .type-h3 { margin-bottom: 0.75rem; }
.card .type-body { margin-bottom: 1.25rem; }

.card-link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--band-accent);
  text-decoration: none;
}
/* stretch the card's link target over the whole card */
.card .card-link::after { content: ""; position: absolute; inset: 0; }

/* ================================================================
   BUTTONS
   Square accent CTA. Acid fill always carries INK text
   (14.93:1); white text on the acid fails AA (1.32:1).
   ================================================================ */

.btn-cta {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--accent-dark);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  text-decoration: none;
  border: none;
  border-radius: 0;               /* square, deliberately */
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.btn-cta:hover { background: color-mix(in srgb, var(--accent-dark) 88%, var(--band-bg)); }

.btn-chip {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--fg-20);
  color: var(--band-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.btn-chip:hover { border-color: var(--band-accent); color: var(--band-accent); }

/* ================================================================
   LISTS + LINKS + RULES
   ================================================================ */

.list-chevron {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  line-height: 1.75;
  color: var(--fg-65);
}
.list-chevron li { padding-left: 1.1em; position: relative; }
.list-chevron li + li { margin-top: 0.5rem; }
.list-chevron li::before {
  content: "\203A";               /* single right chevron */
  position: absolute;
  left: 0;
  color: var(--band-accent);
  font-weight: 700;
}

.link-arrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--band-accent);
  text-decoration: none;
}
.link-arrow::after { content: " \2192"; }   /* right arrow */
.link-arrow:hover { text-decoration: underline; }

/* thick 4px accent top-rule info column */
.rule-col {
  border-top: 4px solid var(--band-accent);
  padding-top: 1.5rem;
}

/* 2px accent left-rule sub-service list */
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rule-list li {
  border-left: 2px solid var(--band-accent);
  padding: 0.35rem 0 0.35rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--fg-70);
}
.rule-list li + li { margin-top: 0.5rem; }

/* ================================================================
   FAQ ACCORDION (single-open, plus icon rotates 45deg)
   ================================================================ */

.faq { border-top: 1px solid var(--fg-10); }
.faq-item { border-bottom: 1px solid var(--fg-10); }
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--band-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-body-lg);
}
.faq-icon {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--band-accent);
  transition: transform 0.4s var(--ease-out-soft);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out-soft);
}
.faq-item.open .faq-answer { max-height: 500px; }
.faq-answer .type-body { padding-bottom: 1.5rem; }

/* ================================================================
   LOGO TICKER (120s loop, pause on hover, edge fade masks)
   Fades blend to the band background, so it works on either band.
   ================================================================ */

.ticker-strip { overflow: hidden; position: relative; }
.ticker-strip::before,
.ticker-strip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
.ticker-strip::before { left: 0;  background: linear-gradient(to right, var(--band-bg), transparent); }
.ticker-strip::after  { right: 0; background: linear-gradient(to left,  var(--band-bg), transparent); }
.ticker-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  padding: 1.75rem 0;
  animation: tickerScroll 120s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
.ticker-item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  color: var(--fg-30);
  transition: color 0.3s ease;
}
.ticker-item:hover { color: var(--fg-70); }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================================================
   NAV DRAWER (right slide-in, staggered giant links)
   The drawer is always an ink surface regardless of band.
   ================================================================ */

.hamburger {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }

.nav-panel {
  position: fixed;
  top: 0; right: 0;
  z-index: 41;
  height: 100%;
  width: 18rem;
  background: var(--ink);
  border-left: 1px solid color-mix(in srgb, var(--bone) 10%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6rem 2.5rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out-soft);
  /* the drawer is its own ink context */
  --band-bg: var(--ink);
  --band-fg: var(--bone);
  --band-accent: var(--accent-dark);
  --fg-30: color-mix(in srgb, var(--bone) 30%, transparent);
  color: var(--bone);
}
@media (min-width: 640px) { .nav-panel { width: 20rem; } }
.nav-panel.open { transform: translateX(0); }
.nav-panel nav { display: flex; flex-direction: column; gap: 1.5rem; }
.nav-link {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--bone);
  text-decoration: none;
  opacity: 0;
  transform: translateX(20px);
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--accent-dark); }
.nav-panel.open .nav-link { animation: navSlideIn 0.3s ease both; }
.nav-panel.open .nav-link:nth-child(1) { animation-delay: 0.10s; }
.nav-panel.open .nav-link:nth-child(2) { animation-delay: 0.15s; }
.nav-panel.open .nav-link:nth-child(3) { animation-delay: 0.20s; }
.nav-panel.open .nav-link:nth-child(4) { animation-delay: 0.25s; }
.nav-panel.open .nav-link:nth-child(5) { animation-delay: 0.30s; }
.nav-panel.open .nav-link:nth-child(6) { animation-delay: 0.35s; }
.nav-panel.open .nav-link:nth-child(7) { animation-delay: 0.40s; }
.nav-panel.open .nav-link:nth-child(8) { animation-delay: 0.45s; }
@keyframes navSlideIn { to { opacity: 1; transform: translateX(0); } }

.nav-panel-foot {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-30);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-brandmark { width: 70px; height: 6px; background: var(--accent-dark); flex: none; }

/* ================================================================
   FLOATING PILL CLUSTER + CONTACT MODAL
   ================================================================ */

.pill-cluster {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
}
@media (min-width: 640px) { .pill-cluster { bottom: 2rem; right: 2rem; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-pill);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.pill svg { width: 1rem; height: 1rem; fill: currentColor; flex: none; }
.pill--dark {
  background: var(--ink);
  color: var(--bone);
  border: 1px solid color-mix(in srgb, var(--bone) 25%, transparent);
}
.pill--dark:hover { border-color: var(--accent-dark); }
.pill--accent {
  background: var(--accent-dark);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--accent-dark) 30%, transparent);
}
.pill--accent:hover { background: color-mix(in srgb, var(--accent-dark) 88%, var(--ink)); }

.popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100dvh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.popup-backdrop.open { opacity: 1; pointer-events: auto; }

.popup-modal {
  width: 100%;
  max-width: 28rem;
  max-height: 100%;
  overflow-y: auto;
  padding: 2rem;
  border-radius: var(--radius-card);
  border: 2px solid color-mix(in srgb, var(--bone) 10%, transparent);
  background: color-mix(in srgb, var(--bone) 5%, var(--ink));
  color: var(--bone);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* the modal is its own ink context */
  --band-bg: var(--ink);
  --band-fg: var(--bone);
  --band-accent: var(--accent-dark);
  --fg-88: color-mix(in srgb, var(--bone) 88%, transparent);
  --fg-80: color-mix(in srgb, var(--bone) 80%, transparent);
  --fg-70: color-mix(in srgb, var(--bone) 70%, transparent);
  --fg-65: color-mix(in srgb, var(--bone) 65%, transparent);
  --fg-40: color-mix(in srgb, var(--bone) 40%, transparent);
  --fg-30: color-mix(in srgb, var(--bone) 30%, transparent);
}
.popup-backdrop.open .popup-modal { opacity: 1; transform: translateY(0) scale(1); }

.popup-close {
  background: none;
  border: none;
  color: var(--fg-40);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.popup-close:hover { color: var(--bone); }

.field {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--fg-40);
  padding: 0.75rem 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--bone);
}
.field::placeholder { color: var(--fg-60); }
.field:focus { outline: none; border-bottom-color: var(--accent-dark); }

.btn-cta--full { width: 100%; text-align: center; }