/* ==========================================================================
   APEX MEDIA — services.css
   Additive stylesheet for the Services page only.
   Loaded AFTER style.css — reuses the same design tokens (colors, type,
   spacing, easing) defined in :root. Does not modify or override any
   Home Page selector.
   ========================================================================== */

/* ---- Breadcrumb on inner-page hero ---- */
.breadcrumb{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:var(--gray-dim); letter-spacing:.04em; margin:0 0 22px;
}
.breadcrumb a{ color:var(--gray-dim); transition:color .3s; }
.breadcrumb a:hover{ color:var(--red-bright); }
.breadcrumb span{ color:var(--gray-dim); opacity:.6; }
.breadcrumb em{ font-style:normal; color:var(--white); }

/* ---- Active nav state on the current page ---- */
.main-nav a.active{ color:var(--white); }
.main-nav a.active::after{ width:100%; }

/* ==========================================================================
   EDITOR SHOWCASE — team/editor visuals + example reel
   ========================================================================== */
.editor-showcase{ padding:150px 0; background:var(--black-deep); }

.editor-grid{
  margin-top:60px; display:grid; grid-template-columns:repeat(6,1fr); gap:22px;
}
.editor-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px;
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.editor-card.in-view{ opacity:1; transform:translateY(0); }
.editor-photo-wrap{
  width:96px; height:96px; border-radius:50%; padding:4px;
  background:conic-gradient(from 180deg, var(--red-bright), var(--red-deep), var(--red-bright));
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 14px 30px -12px rgba(0,0,0,.7);
  transition:transform .4s var(--ease);
}
.editor-card:hover .editor-photo-wrap{ transform:scale(1.07) translateY(-4px); }
.editor-photo{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--charcoal-2); border:2px solid var(--black-deep);
}
.editor-photo img{ width:100%; height:100%; object-fit:cover; }
.editor-name{ font-size:13.5px; font-weight:700; }
.editor-role{ font-size:11px; color:var(--gray-dim); text-transform:uppercase; letter-spacing:.07em; }

.examples-heading{ margin-top:100px; }
.examples-grid{ margin-top:52px; }

/* ==========================================================================
   ADD ONCE AND SCALE — alternating service blocks
   ========================================================================== */
.scale-section{ padding:150px 0; background:linear-gradient(180deg, var(--black), var(--black-deep)); }

.scale-row{
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  margin-top:100px;
}
.scale-row:first-of-type{ margin-top:64px; }
.scale-row.reverse .scale-visual{ order:2; }
.scale-row.reverse .scale-copy{ order:1; }

.scale-visual-frame{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-strong); background:var(--charcoal-3);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7); aspect-ratio:16/9;
}
.scale-visual-frame.ratio-9x16{ aspect-ratio:9/16; max-width:340px; margin:0 auto; }
.scale-visual-frame img{ width:100%; height:100%; object-fit:cover; filter:brightness(.86); }
.scale-badge{
  position:absolute; top:20px; left:20px; width:52px; height:52px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, rgba(225,6,0,.28), rgba(225,6,0,.06));
  border:1px solid var(--red-glow-soft); color:var(--red-bright);
  backdrop-filter:blur(6px);
}
.scale-index{
  position:absolute; bottom:16px; right:20px; font-family:var(--font-display);
  font-size:13px; color:rgba(255,255,255,.75); letter-spacing:.05em;
}

.scale-copy .service-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--red-bright); margin:0 0 14px; }
.scale-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,2.6vw,34px); line-height:1.15; letter-spacing:.02em; margin:0 0 18px;
}
.scale-desc{ font-size:16px; line-height:1.75; color:var(--gray); max-width:520px; margin:0 0 24px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .editor-grid{ grid-template-columns:repeat(3,1fr); }
  .scale-row{ grid-template-columns:1fr; gap:40px; margin-top:70px; }
  .scale-row.reverse .scale-visual{ order:0; }
  .scale-row.reverse .scale-copy{ order:0; }
  .scale-desc{ max-width:100%; }
}

@media (max-width:640px){
  .editor-grid{ grid-template-columns:repeat(2,1fr); gap:26px 16px; }
  .breadcrumb{ font-size:11.5px; }
}