/* ============================================
   GOLDEN INK — Service Pages
   services.css
   ============================================ */

/* Page Hero (70vh) */
.page-hero--service {
  position: relative;
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 4rem;
}
.page-hero--service .hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero--service .hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.35) saturate(0.8); }
.page-hero--service .hero__vignette-bottom { position: absolute; inset: 0; background: linear-gradient(to top, #0A0A0A 0%, transparent 50%); z-index: 1; }
.page-hero--service .hero__content { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); width: 100%; }
.page-hero--service .hero__breadcrumb { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.15em; margin-bottom: 1rem; }
.page-hero--service .hero__breadcrumb a { color: var(--muted); text-decoration: none; }
.page-hero--service .hero__breadcrumb a:hover { color: var(--gold); }
.page-hero--service h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1rem; }
.page-hero--service .hero__desc { font-family: var(--font-body); font-weight: 300; font-size: var(--text-lg); color: var(--muted); max-width: 560px; margin-bottom: 2rem; line-height: 1.7; }
.page-hero--service .hero__buttons { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Section Header (reusable) */
.s-header { text-align: center; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); margin-bottom: 3rem; }
.s-header h2 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); margin-bottom: 1rem; }
.s-header p { font-size: var(--text-lg); color: var(--muted); max-width: 600px; margin-inline: auto; }

/* Filter Bar */
.filter-bar { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 3rem; padding-inline: var(--container-pad); }
.filter-btn { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 20px; border: 1px solid var(--border); border-radius: 100px; color: var(--muted); cursor: pointer; transition: all var(--fast) var(--ease); }
.filter-btn.active, .filter-btn:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* Style Cards Grid (Masonry-like) */
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.style-card { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4; cursor: pointer; }
.style-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.style-card:hover img { transform: scale(1.05); }
.style-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 50%); opacity: 0; transition: opacity var(--mid) var(--ease); }
.style-card:hover .style-card__overlay { opacity: 1; }
.style-card__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; z-index: 2; transform: translateY(10px); opacity: 0; transition: all var(--mid) var(--ease); }
.style-card:hover .style-card__content { transform: translateY(0); opacity: 1; }
.style-card__name { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--white); margin-bottom: 0.25rem; }
.style-card__desc { font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Timeline */
.timeline { max-width: 800px; margin-inline: auto; padding-inline: var(--container-pad); position: relative; }
.timeline::before { content: ''; position: absolute; left: 32px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline__step { display: flex; gap: 2rem; margin-bottom: 3rem; position: relative; }
.timeline__number { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-lg); color: var(--gold); background: var(--black); z-index: 1; }
.timeline__content h3 { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--white); margin-bottom: 0.5rem; text-transform: uppercase; }
.timeline__content p { font-size: var(--text-sm); color: var(--muted); line-height: 1.8; margin-bottom: 0; }
.timeline__meta { font-family: var(--font-mono); font-size: 11px; color: var(--gold); margin-top: 0.5rem; letter-spacing: 0.1em; }

/* Hygiene / Trust Grid */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); align-items: center; }
.trust-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.trust-list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); color: var(--muted); line-height: 1.6; }
.trust-list li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.trust-image { border-radius: var(--radius-md); overflow: hidden; }
.trust-image img { width: 100%; height: auto; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); margin-bottom: 2rem; }
.pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; text-align: center; transition: border-color var(--fast) var(--ease); }
.pricing-card:hover { border-color: var(--border-hover); }
.pricing-card__label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.pricing-card__price { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--white); margin-bottom: 0.25rem; }
.pricing-card__desc { font-size: var(--text-xs); color: var(--muted); }

/* Factors Table */
.factors-table { width: 100%; border-collapse: collapse; max-width: var(--container); margin-inline: auto; margin-bottom: 2rem; }
.factors-table th, .factors-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.factors-table th { color: var(--gold); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.factors-table td { color: var(--muted); }

/* Accordion */
.accordion { max-width: 800px; margin-inline: auto; padding-inline: var(--container-pad); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.25rem 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; color: var(--white); cursor: pointer; text-align: left; transition: color var(--fast) var(--ease); }
.accordion__trigger:hover { color: var(--gold); }
.accordion__trigger::after { content: '+'; font-size: var(--text-xl); color: var(--gold); transition: transform var(--mid) var(--ease); flex-shrink: 0; margin-left: 1rem; }
.accordion__item.open .accordion__trigger::after { content: '−'; }
.accordion__item.open .accordion__trigger { color: var(--gold); }
.accordion__panel { max-height: 0; overflow: hidden; transition: max-height var(--mid) var(--ease); }
.accordion__panel-inner { padding: 0 0 1.5rem; font-size: var(--text-sm); color: var(--muted); line-height: 1.8; }

/* CTA Band */
.cta-band { background: var(--surface); border-top: 1px solid var(--border); padding-block: 80px; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 3rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); flex-wrap: wrap; }
.cta-band__text h2 { font-family: var(--font-heading); font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); margin-bottom: 0.5rem; }
.cta-band__text p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.cta-band__buttons { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* Service Detail Cards */
.service-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2.5rem; margin-bottom: 1.5rem; }
.service-detail h3 { font-family: var(--font-heading); font-size: var(--text-2xl); margin-bottom: 1rem; }
.service-detail p { color: var(--muted); line-height: 1.8; }
.service-detail__specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.service-detail__spec-label { font-family: var(--font-mono); font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 4px; }
.service-detail__spec-value { font-size: var(--text-sm); color: var(--white); }

/* Contraindications */
.contra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.contra-column h3 { font-size: var(--text-lg); margin-bottom: 1rem; color: var(--white); }
.contra-column ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.contra-column li { font-size: var(--text-sm); color: var(--muted); padding-left: 1.5rem; position: relative; }
.contra-column li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

/* Material Cards */
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }
.material-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; text-align: center; }
.material-card h3 { font-family: var(--font-display); font-size: var(--text-sm); color: var(--gold); letter-spacing: 0.1em; margin-bottom: 0.25rem; }
.material-card__subtitle { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 1rem; }
.material-card p { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; }

/* Piercing Region Table */
.region-table { width: 100%; border-collapse: collapse; max-width: var(--container); margin-inline: auto; }
.region-table th { font-size: var(--text-xs); color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; padding: 12px 16px; text-align: left; border-bottom: 2px solid var(--border); }
.region-table td { padding: 14px 16px; font-size: var(--text-sm); color: var(--muted); border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6; }
.region-table td:first-child { color: var(--white); font-weight: 500; white-space: nowrap; }

/* Multi-select checkboxes */
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.checkbox-grid label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); cursor: pointer; }
.checkbox-grid input[type="checkbox"] { accent-color: var(--gold); width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 1024px) {
  .style-grid { grid-template-columns: repeat(2, 1fr); }
  .material-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-hero--service { height: 60vh; min-height: 400px; text-align: center; }
  .page-hero--service .hero__buttons { justify-content: center; }
  .style-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .contra-grid { grid-template-columns: 1fr; }
  .material-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; text-align: center; }
  .cta-band__buttons { justify-content: center; }
  .timeline::before { left: 32px; }
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .region-table { display: block; overflow-x: auto; }
}