/* ============================================================
   Medz Web Services — shared stylesheet
   Replaces the support.js runtime styles (migration, July 2026).
   Palette: bg #111111 · cream #F5F0E8 · amber #E6A817 · pink #FDA4AF
   ============================================================ */

/* ---------- accessibility foundations ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: #E6A817; color: #111111; text-decoration: none;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500;
  padding: 12px 20px; border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid #E6A817; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

/* ---------- fixed nav ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 8vw;
  background: transparent; border-bottom: 1px solid transparent;
  transition: padding .35s ease, background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-nav.scrolled {
  padding: 16px 8vw;
  background: rgba(17,17,17,0.72);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(245,240,232,0.08);
  box-shadow: 0 10px 34px -16px rgba(0,0,0,0.7);
}
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: 38px; }
.nav-links { display: flex; align-items: center; gap: 38px; }

.nlink {
  font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 15px;
  color: rgba(245,240,232,0.78); text-decoration: none;
  letter-spacing: 0.01em; transition: color .2s;
}
.nlink:hover { color: #F5F0E8; }

/* hamburger — hidden on desktop */
.nav-toggle { display: none; }

/* hidden on desktop; shown inside the mobile menu panel */
.mobile-only { display: none; }

@media (max-width: 760px) {
  body { overflow-x: clip; }
  .site-nav { padding: 14px 5vw; }
  .site-nav.scrolled { padding: 12px 5vw; }
  .nav-right { gap: 10px; }
  .site-nav .btn-amber.small { font-size: 13px; padding: 9px 14px; }
  /* headline floors sized for desktop overflow a 375px viewport */
  h1 { font-size: clamp(30px, 9.6vw, 68px) !important; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(17,17,17,0.97); border-bottom: 1px solid rgba(245,240,232,0.1);
    padding: 8px 6vw 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links .nlink { padding: 15px 0; font-size: 17px; border-bottom: 1px solid rgba(245,240,232,0.07); }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0;
  }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: #F5F0E8; transition: transform .25s, opacity .25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links .mobile-only { display: block; }
}

@media (max-width: 430px) {
  /* not enough room for the standalone CTA next to the hamburger —
     "Book a Consult" lives inside the menu panel instead (.mobile-only) */
  .site-nav .nav-right > .btn-amber.small { display: none; }
}

/* ---------- buttons ---------- */
.btn-amber {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Outfit', sans-serif; font-weight: 500;
  color: #111111; background: #E6A817; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn-amber.big {
  font-size: 16px; padding: 17px 30px; border-radius: 10px;
  box-shadow: 0 14px 40px -16px rgba(230,168,23,0.8);
}
.btn-amber.big:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(230,168,23,0.9); }
.btn-amber.small { font-size: 14px; padding: 11px 20px; border-radius: 8px; }
.btn-amber.small:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(230,168,23,0.7); }

/* ---------- work cards ---------- */
.work-card {
  display: block; text-decoration: none; color: inherit;
  background: #161616; border: 1px solid rgba(245,240,232,0.08);
  border-radius: 14px; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.work-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px -28px rgba(0,0,0,0.85);
  border-color: rgba(230,168,23,0.4);
}

/* plain text links that warm to amber (overrides inline base colour) */
.textlink:hover { color: #E6A817 !important; }

/* ---------- responsive grids ----------
   Layout columns live HERE, not in inline styles, so they can collapse. */
.g-about   { display: grid; grid-template-columns: 0.85fr 1fr; gap: 72px; align-items: start; }
.g-work    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.g-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.g-book    { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.g-meta    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.g-story   { display: grid; grid-template-columns: 0.4fr 1fr; gap: 48px; align-items: start; }
.g-two     { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.g-list-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }

@media (max-width: 980px) {
  .g-work    { grid-template-columns: repeat(2, 1fr); }
  .g-pricing { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
  .g-about   { grid-template-columns: 1fr; gap: 56px; }
  .g-book    { grid-template-columns: 1fr; gap: 48px; }
  .g-meta    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .g-work  { grid-template-columns: 1fr; }
  .g-story { grid-template-columns: 1fr; gap: 16px; }
  .g-two   { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .g-list-2 { grid-template-columns: 1fr; }
}