/* ============================================================
   SERVICES — Technical Precision Design
   Concept: Structured documentation that commands authority.
   Numbered architecture, monospaced accents, vertical rhythm,
   everything earns its place like a well-written spec.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@300;400;500&family=Sora:wght@300;400;500;600&display=swap');

:root {
  --svc-mono: 'JetBrains Mono', monospace;
  --svc-serif: 'DM Serif Display', serif;
  --svc-rule: #102B321A;
  --svc-rule-strong: #102B3228;
  --svc-gap: clamp(3rem, 6vw, 7rem);
  --svc-indent: clamp(1.5rem, 4vw, 4rem);
}

/* ── SERVICE HERO ── */
.svc-hero {
  padding: calc(var(--nav-h) + var(--topbar-h) + 5rem) var(--svc-gap) 0;
  position: relative;
}

.svc-hero__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  opacity: 0;
  animation: svc-fade 0.5s 0.1s forwards;
}

.svc-hero__tag {
  font-family: var(--svc-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--clr-brand-accent);
  background: var(--clr-brand);
  padding: 0.25rem 0.6rem;
  letter-spacing: 0.08em;
}

.svc-hero__divider {
  height: 1px;
  flex: 1;
  background: var(--svc-rule-strong);
}

.svc-hero__index {
  font-family: var(--svc-mono);
  font-size: 0.68rem;
  color: var(--clr-text-muted);
}

.svc-hero__name {
  font-family: var(--svc-serif);
  font-size: clamp(2.8rem, 6.5vw, 6rem);
  line-height: 0.95;
  color: var(--primary-color);
  letter-spacing: -0.02em;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: svc-fade 0.7s 0.2s forwards;
}

.svc-hero__hook {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem var(--svc-indent) 2rem 0;
  border-top: 1px solid var(--svc-rule-strong);
  opacity: 0;
  animation: svc-fade 0.7s 0.35s forwards;
}

.svc-hero__hook-line {
  width: 2px;
  height: 100%;
  background: var(--clr-brand-accent);
  min-height: 3rem;
}

.svc-hero__hook-text {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── SECTION SYSTEM ── */
.svc-section {
  padding: 4rem var(--svc-gap);
  border-bottom: 1px solid var(--svc-rule);
  position: relative;
}

.svc-section--dark {
  background: var(--primary-color);
}

.svc-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2rem;
  align-items: baseline;
  margin-bottom: 3rem;
}

.svc-section-num {
  font-family: var(--svc-mono);
  font-size: 0.65rem;
  color: var(--clr-brand-accent);
  letter-spacing: 0.12em;
  padding-top: 0.3rem;
}

.svc-section-title {
  font-family: var(--svc-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--primary-color);
  line-height: 1.2;
  font-weight: 400;
}

.svc-section--dark .svc-section-title { color: #fff; }

/* ── WHAT THIS IS ── */
.svc-definition {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem 8vw;
}

.svc-definition__aside {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
}

.svc-definition__label {
  font-family: var(--svc-mono);
  font-size: 0.65rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.svc-definition__summary {
  font-family: var(--svc-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--primary-color);
  font-style: italic;
}

.svc-definition__body {
  font-size: 0.93rem;
  line-height: 1.85;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── WHO THIS IS FOR ── */
.svc-audience {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
}

.svc-audience__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--svc-rule-strong);
  margin: -1px 0 0 -1px;
  transition: var(--trans);
}

.svc-audience__item:hover {
  background: var(--clr-brand-light);
  z-index: 1;
  position: relative;
}

.svc-audience__num {
  font-family: var(--svc-mono);
  font-size: 0.65rem;
  color: var(--clr-brand-accent);
  padding-top: 0.15rem;
}

.svc-audience__text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── WHAT WE DO ── */
.svc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-breakdown__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--svc-rule);
  transition: var(--trans);
}

.svc-breakdown__item:first-child { border-top: 1px solid var(--svc-rule); }
.svc-breakdown__item:hover { padding-left: 0.5rem; }

.svc-breakdown__step {
  font-family: var(--svc-mono);
  font-size: 0.65rem;
  color: var(--clr-brand-accent);
  padding-top: 0.3rem;
  letter-spacing: 0.08em;
}

.svc-breakdown__content {}

.svc-breakdown__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.6rem;
  letter-spacing: 0.01em;
}

.svc-breakdown__desc {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── HOW WE APPROACH IT ── */
.svc-approach {
  padding: 2.5rem;
  border: 1px solid var(--svc-rule-strong);
  position: relative;
}

.svc-approach::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--clr-brand-accent);
}

.svc-approach__text {
  font-size: 0.93rem;
  line-height: 1.9;
  color: var(--clr-text);
  font-weight: 300;
  padding-left: 1.5rem;
}

/* ── WALK AWAY (deliverables table) ── */
.svc-deliverables {
  overflow: hidden;
  border: 1px solid var(--svc-rule-strong);
}

.svc-deliverables__row {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  border-bottom: 1px solid var(--svc-rule);
  transition: var(--trans);
}

.svc-deliverables__row:last-child { border-bottom: none; }
.svc-deliverables__row:hover { background: var(--clr-brand-light); }

.svc-deliverables__key {
  padding: 1.1rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-color);
  border-right: 1px solid var(--svc-rule-strong);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.svc-deliverables__key::before {
  content: '→';
  color: var(--clr-brand-accent);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.svc-deliverables__val {
  padding: 1.1rem 1.4rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── CALLOUT ── */
.svc-callout {
  padding: 3.5rem var(--svc-gap);
  background: var(--primary-color);
  position: relative;
}

.svc-callout__inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.svc-callout__bracket {
  font-family: var(--svc-mono);
  font-size: 3rem;
  color: var(--clr-brand-accent);
  line-height: 1;
  opacity: 0.6;
  flex-shrink: 0;
  margin-top: -0.5rem;
}

.svc-callout__text {
  font-family: var(--svc-serif);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  color: #fff;
  line-height: 1.5;
  font-style: italic;
}

/* ── WHEN YOU NEED THIS ── */
.svc-triggers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--svc-rule-strong);
  border: 1px solid var(--svc-rule-strong);
}

.svc-trigger {
  padding: 1.6rem;
  background: var(--bg-color);
  transition: var(--trans);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.svc-trigger:hover { background: var(--clr-brand-light); }

.svc-trigger__check {
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid var(--clr-brand-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.svc-trigger__check::after {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--clr-brand-accent);
}

.svc-trigger__text {
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--clr-text);
  font-weight: 300;
}

/* ── CTA ── */
.svc-cta {
  padding: 4rem var(--svc-gap);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  border-top: 2px solid var(--primary-color);
}

.svc-cta__line {
  font-family: var(--svc-mono);
  font-size: 0.72rem;
  color: var(--clr-text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
}

.svc-cta__text {
  font-family: var(--svc-serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--primary-color);
  line-height: 1.3;
}

.svc-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  color: var(--primary-color);
  padding: 0.9rem 1.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--primary-color);
  transition: var(--trans);
  white-space: nowrap;
}

.svc-cta__btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* ── ANIMATIONS ── */
@keyframes svc-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.svc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.svc-reveal.is-visible { opacity: 1; transform: translateY(0); }
.svc-reveal-delay-1 { transition-delay: 0.08s; }
.svc-reveal-delay-2 { transition-delay: 0.16s; }
.svc-reveal-delay-3 { transition-delay: 0.26s; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .svc-definition { grid-template-columns: 1fr; }
  .svc-definition__aside { position: static; }
  .svc-cta { grid-template-columns: 1fr; }
  .svc-breakdown__item { grid-template-columns: 2rem 1fr; gap: 1rem; }
}

@media (max-width: 600px) {
  .svc-deliverables__row { grid-template-columns: 1fr; }
  .svc-deliverables__key { border-right: none; border-bottom: 1px solid var(--svc-rule); }
  .svc-audience { grid-template-columns: 1fr; }
}