/* Service landing pages — shared layout on top of style.css + gallery.css tokens. */

.sv-crumb {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--col-faint); margin-bottom: 1.6rem;
}
.sv-crumb a { color: var(--col-muted); }
.sv-crumb a:hover { color: var(--col-accent); }
.sv-crumb span[aria-hidden] { color: var(--col-accent-dim); }

.sv-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* at-a-glance strip */
.sv-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--col-border); border: 1px solid var(--col-border);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.sv-fact { background: var(--col-bg-deep); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.sv-fact-k { font-family: var(--ff-mono); font-size: .55rem; letter-spacing: .24em; text-transform: uppercase; color: var(--col-faint); }
.sv-fact-v { font-family: var(--ff-cond); font-size: 1.05rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--col-off); line-height: 1.3; }

/* sections */
.sv-section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.sv-section--deep { background: var(--col-bg-deep); }
.sv-section--panel { background: var(--col-bg-panel); }
.sv-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.sv-intro .body-text { max-width: none; }
.sv-lead { font-family: var(--ff-cond); font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 300; color: var(--col-off); line-height: 1.35; letter-spacing: .01em; }

/* deliverables grid */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--col-border); border: 1px solid var(--col-border); }
.sv-card { background: var(--col-bg); padding: 1.7rem 1.6rem; position: relative; overflow: hidden; }
.sv-section--deep .sv-card { background: var(--col-bg-deep); }
.sv-card::before {
  content: ''; position: absolute; inset: 0; background: var(--hatch); opacity: .35;
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
.sv-card:hover::before { transform: translateY(0); }
.sv-card > * { position: relative; z-index: 1; }
.sv-card-no { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .2em; color: var(--col-accent-dim); display: block; margin-bottom: .9rem; }
.sv-card h3 { font-family: var(--ff-cond); font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--col-white); margin-bottom: .6rem; line-height: 1.15; }
.sv-card p { font-size: .88rem; color: var(--col-muted); line-height: 1.7; }

/* who it's for */
.sv-clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem 2.4rem; }
.sv-client { border-top: 1px solid var(--col-border); padding-top: 1.1rem; }
.sv-client h3 { font-family: var(--ff-cond); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--col-off); margin-bottom: .45rem; }
.sv-client p { font-size: .86rem; color: var(--col-muted); line-height: 1.7; }

/* process — reuse notes-list rhythm */
.sv-process { max-width: 880px; counter-reset: step; }
.sv-step { display: grid; grid-template-columns: 64px 1fr; gap: 1.4rem; padding: 1.4rem 0; border-top: 1px solid var(--col-border); align-items: baseline; }
.sv-step:last-child { border-bottom: 1px solid var(--col-border); }
.sv-step-no { font-family: var(--ff-mono); font-size: .68rem; font-weight: 500; letter-spacing: .2em; color: var(--col-accent-dim); }
.sv-step h3 { font-family: var(--ff-cond); font-size: 1.15rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--col-white); margin-bottom: .35rem; }
.sv-step p { font-size: .92rem; color: rgba(255,255,255,.62); line-height: 1.7; font-weight: 300; }

/* portfolio strip */
.sv-work { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 8px; }
.sv-work a { display: block; overflow: hidden; background: var(--col-bg-panel); position: relative; }
.sv-work a:first-child { grid-column: span 2; grid-row: span 2; }
.sv-work img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.15); transition: transform .6s var(--ease-out), filter .4s; }
.sv-work a:hover img { transform: scale(1.05); filter: grayscale(0); }
.sv-work .sv-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem .8rem;
  font-family: var(--ff-mono); font-size: .55rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--col-off); background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.sv-work-more { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.sv-work-note { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--col-faint); }

/* software / formats */
.sv-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.4rem; }
.sv-tools h3 { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--col-accent-dim); margin-bottom: 1rem; }
.sv-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-chip {
  font-family: var(--ff-cond); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .5rem .95rem; border: 1px solid rgba(255,255,255,.16); color: var(--col-off);
}

/* turnaround table */
.sv-table { width: 100%; border-collapse: collapse; max-width: 880px; }
.sv-table th, .sv-table td { text-align: left; padding: .95rem .6rem; border-bottom: 1px solid var(--col-border); vertical-align: top; }
.sv-table th { font-family: var(--ff-mono); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--col-faint); font-weight: 500; border-top: 1px solid var(--col-border); }
.sv-table td { font-size: .9rem; color: rgba(255,255,255,.7); line-height: 1.6; }
.sv-table td:first-child { font-family: var(--ff-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--col-off); }
.sv-table-note { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--col-faint); margin-top: 1rem; max-width: 880px; line-height: 1.8; }

/* FAQ */
.sv-faq { max-width: 880px; border-top: 1px solid var(--col-border); }
.sv-faq details { border-bottom: 1px solid var(--col-border); }
.sv-faq summary {
  cursor: pointer; list-style: none; padding: 1.25rem 2.4rem 1.25rem 0; position: relative;
  font-family: var(--ff-cond); font-size: 1.05rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--col-off);
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: '+'; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); color: var(--col-accent); font-family: var(--ff-main); font-weight: 300; font-size: 1.3rem; transition: transform .3s var(--ease-out); }
.sv-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sv-faq details p { padding: 0 0 1.4rem; font-size: .92rem; color: var(--col-muted); line-height: 1.8; max-width: 70ch; }

/* related services */
.sv-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--col-border); border: 1px solid var(--col-border); }
.sv-related a { background: var(--col-bg-deep); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; transition: background .3s; }
.sv-related a:hover { background: var(--col-bg-panel); }
.sv-related .sr-num { font-size: .58rem; }
.sv-related .sr-name { font-size: 1.05rem; }
.sv-related .sr-desc { font-size: .8rem; }

@media (max-width: 900px) {
  .sv-intro { grid-template-columns: 1fr; }
  .sv-work { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}
@media (max-width: 560px) {
  .sv-step { grid-template-columns: 44px 1fr; gap: .9rem; }
  .sv-table th:nth-child(3), .sv-table td:nth-child(3) { display: none; }
}