/* ========================================================================
   PAGE.CSS — Shared styles for location & service subpages
   Loaded after styles.css
======================================================================== */

/* ---- Page hero ---- */
.page-hero {
  padding: 160px 0 80px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(245,245,244,.45);
  margin-bottom: 24px;
}
.page-breadcrumb a { color: rgba(245,245,244,.45); transition: color .2s; }
.page-breadcrumb a:hover { color: var(--gold-400); }
.page-breadcrumb span { color: rgba(245,245,244,.25); }
.page-tag {
  display: inline-block;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(252,211,77,.85); font-weight: 500;
  margin-bottom: 18px;
}
.page-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  max-width: 800px;
}
.page-lead {
  margin-top: 24px;
  font-size: 18px; line-height: 1.7;
  color: rgba(245,245,244,.7);
  max-width: 680px;
}
.page-meta {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: 36px;
}
.page-meta-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(245,245,244,.55);
}
.page-meta-item svg { color: var(--gold-400); flex-shrink: 0; }

/* ---- Page body layout ---- */
.page-body { padding: 80px 0 120px; }
.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
@media (min-width: 1024px) {
  .page-grid { grid-template-columns: 1fr 340px; gap: 80px; }
}

/* ---- Article content ---- */
.article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 56px 0 18px;
  line-height: 1.1;
}
.article h2:first-child { margin-top: 0; }
.article p {
  color: rgba(245,245,244,.75);
  font-size: 16px; line-height: 1.75;
  margin-bottom: 20px;
  max-width: 72ch;
}
.article strong { color: var(--bone-50); font-weight: 600; }
.article ul {
  margin: 20px 0; display: flex; flex-direction: column; gap: 10px;
}
.article ul li {
  display: flex; align-items: flex-start; gap: 12px;
  color: rgba(245,245,244,.75); font-size: 16px; line-height: 1.6;
}
.article ul li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-400);
  flex-shrink: 0; margin-top: 9px;
}

/* Process steps */
.process-steps { margin: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.process-step {
  display: flex; gap: 20px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  transition: border-color .3s;
}
.process-step:hover { border-color: rgba(252,211,77,.2); }
.process-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  flex-shrink: 0; line-height: 1; min-width: 32px;
}
.process-content strong {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--bone-50); margin-bottom: 6px;
}
.process-content span {
  font-size: 14px; color: rgba(245,245,244,.6); line-height: 1.55;
}

/* Who it's for */
.who-card {
  margin: 32px 0;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(252,211,77,.06), rgba(252,211,77,.02));
  border: 1px solid rgba(252,211,77,.15);
}
.who-card h3 {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  margin-bottom: 16px;
  color: var(--gold-400);
}
.who-card ul { margin: 0; }

/* ---- Sidebar ---- */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-card {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.07);
}
.sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  margin-bottom: 16px;
}
.sidebar-card p, .sidebar-card li {
  font-size: 14px; color: rgba(245,245,244,.65); line-height: 1.6;
}
.sidebar-card ul { display: flex; flex-direction: column; gap: 8px; }
.sidebar-card ul li { display: flex; align-items: flex-start; gap: 10px; }
.sidebar-card ul li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-400); flex-shrink: 0; margin-top: 8px;
}
.sidebar-cta {
  padding: 28px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(252,211,77,.1), rgba(252,211,77,.04));
  border: 1px solid rgba(252,211,77,.2);
  text-align: center;
}
.sidebar-cta h3 {
  font-family: var(--font-display);
  font-size: 20px; margin-bottom: 10px;
}
.sidebar-cta p { font-size: 13px; color: rgba(245,245,244,.65); margin-bottom: 20px; line-height: 1.55; }
.sidebar-stat { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
.sidebar-stat-num {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 500;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sidebar-stat-label { font-size: 12px; color: rgba(245,245,244,.5); margin-top: 4px; }

/* ---- FAQ section ---- */
.page-faq { margin-top: 56px; }
.page-faq h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500; letter-spacing: -.01em;
  margin-bottom: 24px;
}

/* ---- Related links ---- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.related-card {
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.07);
  transition: border-color .3s, transform .3s;
  display: block;
}
.related-card:hover { border-color: rgba(252,211,77,.25); transform: translateY(-2px); }
.related-card-tag {
  font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(252,211,77,.7); margin-bottom: 8px;
}
.related-card h4 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500;
  color: var(--bone-50); margin-bottom: 6px;
}
.related-card p { font-size: 13px; color: rgba(245,245,244,.55); line-height: 1.5; }