/* --- SERVICE-PAGE COMPOSITIONS (structure & decoration only, no content) --- */

/* ============ HERO SCENE ============ */
.svc-hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.svc-hero-main { min-width: 0; }
.hero-viz { margin: 0; display: none; }
.hero-viz svg { width: 100%; height: auto; display: block; }
@media (min-width: 1000px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 3.5rem; }
  .hero-viz { display: block; }
}
.viz-path {
  fill: none; stroke: rgba(200,169,110,0.5); stroke-width: 1.5;
  stroke-dasharray: 5 9; animation: viz-dash 16s linear infinite;
}
.viz-path--dim { stroke: rgba(255,255,255,0.18); animation-duration: 22s; }
@keyframes viz-dash { to { stroke-dashoffset: -280; } }
.viz-node { fill: #1a1a1a; stroke: rgba(255,255,255,0.25); stroke-width: 1.5; }
.viz-node--accent { stroke: rgba(200,169,110,0.7); }
.viz-core { fill: rgba(200,169,110,0.1); stroke: rgba(200,169,110,0.8); stroke-width: 1.5; animation: viz-pulse 5s ease-in-out infinite; }
@keyframes viz-pulse { 0%,100% { fill-opacity: 0.6; } 50% { fill-opacity: 1; } }
.viz-bar { fill: rgba(255,255,255,0.08); }
.viz-bar--accent { fill: rgba(200,169,110,0.35); }
.viz-rise { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 7; animation: viz-dash 18s linear infinite; }
.viz-scan { transform-box: fill-box; transform-origin: center; animation: viz-scan 4.5s ease-out infinite; }
@keyframes viz-scan { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.viz-blink { animation: viz-blink 2.4s ease-in-out infinite; }
@keyframes viz-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.viz-float { animation: viz-float 8s ease-in-out infinite alternate; }
@keyframes viz-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.viz-grow { transform-box: fill-box; transform-origin: bottom; animation: viz-grow 6s ease-in-out infinite alternate; }
@keyframes viz-grow { from { transform: scaleY(0.86); } to { transform: scaleY(1); } }
.viz-fade2 { animation: viz-blink 3.6s ease-in-out infinite; animation-delay: 1.2s; }
.viz-cut { stroke: rgba(255,255,255,0.15); stroke-width: 1.5; fill: none; stroke-dasharray: 3 6; }

/* ============ SPLIT SECTION (The problem) ============ */
.split-section { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
.split-text { min-width: 0; }
.problem-viz { margin: 0; display: none; }
.problem-viz svg { width: 100%; height: auto; display: block; }
@media (min-width: 960px) {
  .split-section { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; }
  .problem-viz { display: block; }
}

/* ============ BRICK GRID (lists become editorial bricks) ============ */
.service-list.brick-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem; margin-top: 2rem;
  counter-reset: brick; position: relative;
  padding-left: 0;
}
.service-list.brick-grid::before {
  content: ''; position: absolute; left: -28px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(200,169,110,0.05));
  border-radius: 2px;
}
.service-list.brick-grid li {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  position: relative; counter-increment: brick;
  font-size: 0.92rem; line-height: 1.55; color: #c0c0c0;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.service-list.brick-grid li::before {
  content: counter(brick, decimal-leading-zero);
  position: static; display: block;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 0.45rem;
}
.service-list.brick-grid li:hover {
  border-color: rgba(200,169,110,0.4);
  background: var(--card2);
  transform: translateY(-2px);
}
/* controlled width variation for editorial rhythm */
.service-list.brick-grid li:nth-child(6n+1) { grid-column: span 2; }
.service-list.brick-grid li:nth-child(6n+1)::after {
  content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 0 0 2px 0;
}

/* Flow variant (What you receive): connected progression */
.service-list.brick-grid--flow { grid-template-columns: repeat(3, 1fr); }
.service-list.brick-grid--flow li { background: var(--black2); }
.service-list.brick-grid--flow li:nth-child(6n+1) { grid-column: auto; }
.service-list.brick-grid--flow li:nth-child(6n+1)::after { content: none; }
.service-list.brick-grid--flow li:last-child {
  grid-column: 1 / -1;
  background: rgba(200,169,110,0.06);
  border-color: rgba(200,169,110,0.35);
}
.service-list.brick-grid--flow li:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: -11px;
  width: 6px; height: 6px; margin-top: -4px;
  border-top: 2px solid rgba(200,169,110,0.6);
  border-right: 2px solid rgba(200,169,110,0.6);
  transform: rotate(45deg);
}
.service-list.brick-grid--flow li:nth-child(3n)::after { content: none; }

/* ============ FAQ SHELL ============ */
.faq-shell { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.faq-shell .faq-list {
  background: var(--black2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.5rem 1.75rem;
}
.faq-shell .faq-item:last-child { border-bottom: none; }
.faq-shell .faq-item.open .faq-question { color: var(--accent); }
.faq-shell .faq-item.open .faq-toggle { color: var(--accent); }
.faq-shell .faq-question { transition: color 0.25s; }
@media (min-width: 960px) {
  .faq-shell { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; align-items: start; }
  .faq-shell-head { position: sticky; top: 96px; }
  .faq-shell-head h2 { position: relative; padding-top: 1rem; }
  .faq-shell-head h2::before {
    content: ''; position: absolute; top: 0; left: 0; width: 44px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(200,169,110,0.25));
  }
}

/* ============ RELATED SERVICES — editorial asymmetric grid ============ */
.grid-4.related-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 0.9rem; margin-top: 1.5rem; }
.related-grid a.card-sm {
  position: relative; display: flex; align-items: flex-end;
  padding: 1.4rem; min-height: 120px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color 0.25s, background 0.25s;
  overflow: hidden;
}
.related-grid a.card-sm:first-child {
  grid-row: span 2; align-items: flex-end;
  background:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(200,169,110,0.09), transparent 70%),
    var(--card);
}
.related-grid a.card-sm h3 { font-size: 1rem; line-height: 1.35; transition: color 0.25s; }
.related-grid a.card-sm:first-child h3 { font-size: 1.2rem; }
.related-grid a.card-sm::after {
  content: ''; position: absolute; top: 1.3rem; right: 1.3rem;
  width: 7px; height: 7px;
  border-top: 2px solid var(--muted2); border-right: 2px solid var(--muted2);
  transform: rotate(45deg);
  transition: border-color 0.25s, transform 0.25s;
}
.related-grid a.card-sm:hover { border-color: rgba(200,169,110,0.45); background: var(--card2); }
.related-grid a.card-sm:hover h3 { color: var(--accent); }
.related-grid a.card-sm:hover::after { border-color: var(--accent); transform: rotate(45deg) translate(2px, -2px); }

/* ============ SCROLL REVEAL ============ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in-view { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .service-list.brick-grid, .service-list.brick-grid--flow { grid-template-columns: 1fr 1fr; }
  .service-list.brick-grid li:nth-child(6n+1) { grid-column: auto; }
  .service-list.brick-grid--flow li:not(:last-child)::after { content: none; }
  .service-list.brick-grid::before { left: -16px; }
}
@media (max-width: 600px) {
  .service-list.brick-grid, .service-list.brick-grid--flow { grid-template-columns: 1fr; }
  .service-list.brick-grid::before { display: none; }
  .related-grid.grid-4 { grid-template-columns: 1fr; }
  .related-grid a.card-sm, .related-grid a.card-sm:first-child { grid-row: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-path, .viz-path--dim, .viz-core, .viz-rise { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .service-list.brick-grid li:hover, .related-grid a.card-sm:hover::after { transform: none; }
}