/* =============================================================
   VO CREATIVE CO. — Services page styles
   ============================================================= */

/* ---- Page header (shared visual language with portfolio) ---- */
.pg-header {
  padding-block: clamp(120px, 16vw, 200px) clamp(64px, 9vw, 112px);
}
.pg-header .runhead { margin-bottom: 22px; }
.pg-title {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: clamp(56px, 9vw, 116px);
  line-height: 1.0;
  letter-spacing: 0.006em;
  color: var(--ink-on-dark);
  margin: 0 0 28px;
}
.pg-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-on-dark-2);
  margin: 0;
  max-width: 38em;
}

/* Big bold headline variant (Lifestyle hero) */
.pg-shout {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--gold-300);
  text-transform: none;
  margin: 0 0 26px;
  max-width: 14em;
  text-wrap: balance;
}

/* ---- Service section ---- */
.svc-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.svc-flip .svc-body { order: 2; }
.svc-flip .svc-includes { order: 1; }

.svc-body .runhead { margin-bottom: 18px; }
.svc-title {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 15em;
  text-wrap: balance;
}
.svc-desc {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 34em;
}

/* ---- What's included panel ---- */
.svc-includes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(26px, 3vw, 40px);
}
.band-soft .svc-includes { box-shadow: var(--shadow-lg); }
.svc-inc-label { margin: 0 0 20px; }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li {
  position: relative;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--line);
}
.svc-list li:first-child { border-top: 0; }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--primary);
  border-bottom: 1.5px solid var(--primary);
  transform: rotate(-45deg);
}

/* ---- CTA band (reused from portfolio) ---- */
.cs-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.cs-cta-side .statement-sig { margin-bottom: 32px; }

/* =============================================================
   SERVICE OVERVIEW — card grid (services.html)
   ============================================================= */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 2.4vw, 36px);
  text-decoration: none;
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.svc-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.svc-card .n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 22px;
}
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: 25px;
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 12px;
}
.svc-card p {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  flex: 1;
}
.svc-card .go {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.svc-card .go .arr { transition: transform var(--dur-med) var(--ease-out); }
.svc-card:hover .go .arr { transform: translateX(4px); }

/* =============================================================
   SERVICE DETAIL PAGE
   ============================================================= */
.svc-detail {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.svc-detail-main .eyebrow { margin-bottom: 20px; }
.svc-statement {
  font-family: var(--font-display);
  font-weight: var(--w-reg);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0 0 30px;
  max-width: 15em;
  text-wrap: balance;
}
.svc-para {
  font-size: var(--fs-body-lg);
  line-height: 1.66;
  color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 36em;
}
.svc-para strong { color: var(--ink); font-weight: var(--w-semi); }

/* "Who it's for" callout */
.svc-who {
  margin-top: 34px;
  padding: 24px 26px;
  background: var(--cream-200);
  border-left: 2px solid var(--primary);
  border-radius: var(--r-sm);
  max-width: 36em;
}
.svc-who .k {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}
.svc-who p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); margin: 0; }

/* Note / caveat callout (e.g. no weddings) */
.svc-note {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--error-soft);
  border-radius: var(--r-sm);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 36em;
}
.svc-note svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--brick-500); margin-top: 1px; }
.svc-note p { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--espresso-800); margin: 0; }
.svc-note strong { color: var(--brick-500); }

/* Sticky includes on detail pages */
.svc-detail .svc-includes { position: sticky; top: 96px; }
.svc-detail .svc-includes .btn { width: 100%; justify-content: center; margin-top: 26px; }

/* =============================================================
   OTHER SERVICES strip
   ============================================================= */
.svc-other-head { margin-bottom: 32px; }
.svc-other-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.svc-other-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.svc-other-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.svc-other-card span {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.2;
}
.svc-other-card .arr { font-family: var(--font-sans); color: var(--primary); }

/* =============================================================
   WORK SHOWCASE — media tiles + varied gallery layouts
   ============================================================= */
.work-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.work-head .sec-title { margin-top: 14px; }
.work-head .sec-intro { margin-top: 12px; }

/* Base media tile (drop a <video> or <img> inside to go live) */
.wtile {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: repeating-linear-gradient(45deg,
    var(--cream-200), var(--cream-200) 4px, transparent 4px, transparent 12px);
  border: 1.5px dashed var(--sand-400);
  display: flex;
  align-items: center;
  justify-content: center;
}
.band-soft .wtile {
  background: repeating-linear-gradient(45deg,
    var(--oat-300), var(--oat-300) 4px, transparent 4px, transparent 12px);
}
.wtile video, .wtile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 3;
}
.wtile-ph {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--ink-3); text-align: center; padding: 12px;
}
.wtile-ph .ic {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--sand-400); display: flex; align-items: center; justify-content: center;
  color: var(--taupe-600); opacity: 0.85;
}
.wtile-ph .ic svg { width: 17px; height: 17px; }
.wtile-ph .lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Aspect helpers */
.ar-916  { aspect-ratio: 9 / 16; }
.ar-169  { aspect-ratio: 16 / 9; }
.ar-11   { aspect-ratio: 1 / 1; }
.ar-1610 { aspect-ratio: 16 / 10; }

/* --- Influencer: staggered vertical reel wall --- */
.work-reel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work-reel .wtile:nth-child(even) { transform: translateY(32px); }

/* --- Lifestyle: feature vlog + filmstrip --- */
.work-feature-main { margin-bottom: 16px; }
.work-feature-main .ic { width: 60px; height: 60px; }
.work-feature-main .ic svg { width: 24px; height: 24px; }
.work-feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* --- Social: story tiles --- */
.work-stories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.work-stories .wtile { border-radius: var(--r-lg); }

/* --- Events: mixed-size photo mosaic --- */
.work-mosaic {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px; gap: 14px; grid-auto-flow: dense;
}
.work-mosaic .wtile { height: 100%; }
.work-mosaic .big  { grid-column: span 2; grid-row: span 2; }
.work-mosaic .wide { grid-column: span 2; }
.work-mosaic .tall { grid-row: span 2; }

/* --- Strategy: website + content split --- */
.work-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: stretch; }
.work-split .col { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.work-split > .wtile, .work-split .col .wtile { height: 100%; min-height: 200px; }
.wmock::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: var(--oat-300); z-index: 1;
}
.wmock::after {
  content: ""; position: absolute; top: 10px; left: 14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sand-500);
  box-shadow: 14px 0 0 var(--sand-500), 28px 0 0 var(--sand-500); z-index: 2;
}

/* --- E-commerce: product grid + BTS strip --- */
.work-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work-bts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .svc-inner,
  .svc-flip { grid-template-columns: 1fr; gap: 32px; }
  .svc-flip .svc-body { order: 1; }
  .svc-flip .svc-includes { order: 2; }
  .cs-cta { grid-template-columns: 1fr; }
  .svc-detail { grid-template-columns: 1fr; gap: 36px; }
  .svc-detail .svc-includes { position: static; }
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
  .svc-other-grid { grid-template-columns: repeat(2, 1fr); }
  .work-stories { grid-template-columns: repeat(3, 1fr); }
  .work-products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .pg-lead { font-size: var(--fs-body); }
  .svc-cards { grid-template-columns: 1fr; }
  .svc-other-grid { grid-template-columns: 1fr; }
  .work-reel { grid-template-columns: repeat(2, 1fr); }
  .work-reel .wtile:nth-child(even) { transform: none; }
  .work-feature-strip { grid-template-columns: repeat(2, 1fr); }
  .work-stories { grid-template-columns: repeat(2, 1fr); }
  .work-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
  .work-split { grid-template-columns: 1fr; }
  .work-products { grid-template-columns: repeat(2, 1fr); }
  .work-bts { grid-template-columns: 1fr; }
}