/* ── Interior hero ── */
.int-hero {
  padding: 72px 40px 64px;
  border-bottom: .5px solid rgba(240,237,230,.07);
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.int-eye { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #FF5C00; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.int-eye::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF5C00; }
.int-title { font-family: var(--ff-display); font-size: 76px; line-height: .92; letter-spacing: .03em; color: #f0ede6; margin-bottom: 24px; }
.int-title em { color: #FF5C00; font-style: normal; }
.int-body { font-size: 15px; line-height: 1.75; color: rgba(240,237,230,.6); }
.int-body strong { color: #f0ede6; font-weight: 400; }

.int-hero-stats {
  border-left: .5px solid rgba(240,237,230,.08);
  padding-left: 48px; display: flex; flex-direction: column; gap: 0;
}
.stat { padding: 20px 0; border-bottom: .5px solid rgba(240,237,230,.06); }
.stat:last-child { border-bottom: none; }
.stat-num   { display: block; font-family: var(--ff-display); font-size: 48px; color: #FF5C00; line-height: 1; }
.stat-label { display: block; font-size: 13px; color: rgba(240,237,230,.46); margin-top: 2px; }

/* ── Roles ── */
.roles { padding: 64px 40px; border-bottom: .5px solid rgba(240,237,230,.07); }
.roles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(240,237,230,.06); }
.role { background: #0d0d0d; padding: 28px 24px; transition: background .18s; }
.role:hover { background: #111; }
.role-dept  { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,237,230,.4); margin-bottom: 8px; font-family: var(--ff-mono); }
.role-title { font-family: var(--ff-display); font-size: 24px; letter-spacing: .03em; color: #f0ede6; margin-bottom: 8px; }
.role-desc  { font-size: 13px; line-height: 1.65; color: rgba(240,237,230,.46); }

/* ── How it works ── */
.how { padding: 64px 40px; border-bottom: .5px solid rgba(240,237,230,.07); background: #0a0a0a; }
.how-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.how-title { font-family: var(--ff-display); font-size: 48px; line-height: 1; color: #f0ede6; margin-bottom: 16px; }
.how-title em { color: #FF5C00; font-style: normal; }
.how-body  { font-size: 14px; line-height: 1.8; color: rgba(240,237,230,.52); }
.steps     { display: flex; flex-direction: column; }
.step      { display: flex; gap: 18px; padding: 20px 0; border-bottom: .5px solid rgba(240,237,230,.06); }
.step:first-child { padding-top: 0; }
.step:last-child  { border-bottom: none; }
.step-num  { font-family: var(--ff-mono); font-size: 11px; color: #FF5C00; min-width: 22px; padding-top: 2px; flex-shrink: 0; }
.step-title { font-size: 14px; font-weight: 500; color: #f0ede6; margin-bottom: 4px; }
.step-text  { font-size: 13px; line-height: 1.65; color: rgba(240,237,230,.48); }

/* ── Production services ── */
.prod-services { padding: 64px 40px; border-bottom: .5px solid rgba(240,237,230,.07); }
.svc-list  { display: flex; flex-direction: column; gap: 1px; background: rgba(240,237,230,.06); }
.svc-row   { background: #0d0d0d; padding: 28px 32px; display: grid; grid-template-columns: 260px 1fr 24px; gap: 40px; align-items: center; transition: background .18s; }
.svc-row:hover { background: #111; }
.svc-tag   { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #FF5C00; margin-bottom: 6px; font-family: var(--ff-mono); }
.svc-name  { font-family: var(--ff-display); font-size: 26px; letter-spacing: .03em; color: #f0ede6; }
.svc-desc  { font-size: 13px; line-height: 1.7; color: rgba(240,237,230,.5); }
.svc-arrow { font-size: 16px; color: #FF5C00; opacity: .35; transition: opacity .18s; text-align: right; }
.svc-row:hover .svc-arrow { opacity: 1; }

/* ── Quote block ── */
.quote-block { padding: 72px 40px; border-bottom: .5px solid rgba(240,237,230,.07); }
.quote-text  { font-family: var(--ff-display); font-size: 50px; line-height: 1.02; color: #f0ede6; max-width: 580px; margin-bottom: 24px; }
.quote-text em { color: #FF5C00; font-style: normal; }
.quote-sub   { font-size: 14px; line-height: 1.8; color: rgba(240,237,230,.52); max-width: 460px; }

/* ── Callout ── */
.callout { background: #FF5C00; padding: 40px; }
.callout-inner { display: flex; gap: 24px; align-items: flex-start; }
.callout-icon  { font-family: var(--ff-mono); font-size: 28px; color: #0d0d0d; line-height: 1; flex-shrink: 0; }
.callout-title { font-family: var(--ff-display); font-size: 26px; color: #0d0d0d; margin-bottom: 8px; }
.callout-text  { font-size: 14px; line-height: 1.7; color: rgba(13,13,13,.72); }
.callout-text strong { color: #0d0d0d; font-weight: 500; }

/* ── Talent grid ── */
.talent { padding: 64px 40px; border-bottom: .5px solid rgba(240,237,230,.07); }
.talent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(240,237,230,.06); }
.tc { background: #0d0d0d; padding: 30px 26px; transition: background .18s; }
.tc:hover { background: #111; }
.tc-tag    { font-family: var(--ff-mono); font-size: 11px; color: rgba(240,237,230,.4); margin-bottom: 8px; }
.tc-title  { font-family: var(--ff-display); font-size: 24px; color: #f0ede6; margin-bottom: 10px; }
.tc-desc   { font-size: 13px; line-height: 1.65; color: rgba(240,237,230,.46); }
.tc-remote { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,92,0,.12); color: #FF5C00; padding: 3px 8px; border-radius: 2px; margin-top: 12px; font-family: var(--ff-mono); }

/* ── Cities strip (static) ── */
.cities-strip {
  padding: 22px 40px;
  border-bottom: .5px solid rgba(240,237,230,.07);
  background: #0a0a0a;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cities-strip-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(240,237,230,.28); font-family: var(--ff-mono); flex-shrink: 0; }
.cities-strip-item  { font-family: var(--ff-display); font-size: 20px; letter-spacing: .06em; color: rgba(240,237,230,.32); }
.cities-strip-sep   { color: #FF5C00; font-size: 14px; opacity: .55; }

/* ── Contact ── */
.contact-page { padding: 80px 40px 96px; }
.contact-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #FF5C00; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.contact-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #FF5C00; flex-shrink: 0; }
.contact-title { font-family: var(--ff-display); font-size: 76px; line-height: .92; color: #f0ede6; margin-bottom: 28px; }
.contact-title em { color: #FF5C00; font-style: normal; }
.contact-body  { font-size: 16px; line-height: 1.8; color: rgba(240,237,230,.55); margin-bottom: 60px; max-width: 520px; }
.contact-body strong { color: #f0ede6; font-weight: 400; }
.contact-actions { display: flex; flex-direction: column; gap: 0; max-width: 600px; }
.contact-action { display: flex; align-items: center; gap: 32px; padding: 32px 0; border-bottom: .5px solid rgba(240,237,230,.07); }
.contact-action:first-child { border-top: .5px solid rgba(240,237,230,.07); }
.contact-action-key { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,237,230,.36); font-family: var(--ff-mono); min-width: 80px; flex-shrink: 0; }
.contact-action-val { font-family: var(--ff-display); font-size: 36px; color: #f0ede6; letter-spacing: .02em; transition: color .15s; line-height: 1; }
a.contact-action-val:hover { color: #FF5C00; }
.contact-note { font-size: 13px; color: rgba(240,237,230,.35); margin-top: 32px; }

/* ── Nav logo image (centered, hire-crew only) ── */
.nav-logo-img { position: absolute; left: 50%; transform: translateX(-50%); height: 52px; opacity: .85; pointer-events: none; }
@media (max-width: 768px) { .nav-logo-img { display: none; } }

/* ── Photo background sections ── */
.photo-hero { position: relative; overflow: hidden; border-bottom: none; padding: 72px 40px 48px; }
.photo-hero-bg { position: absolute; inset: 0; z-index: 0; }
.photo-hero-bg picture { display: block; width: 100%; height: 100%; }
.photo-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; display: block; }
.photo-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(13,13,13,1) 0%, rgba(13,13,13,.72) 20%, rgba(13,13,13,.28) 48%, rgba(13,13,13,.2) 100%); }
.photo-hero > *:not(.photo-hero-bg):not(.photo-hero-overlay) { position: relative; z-index: 2; }

/* ── Marquee ── */
.marquee-wrap  { padding: 24px 40px; border-bottom: .5px solid rgba(240,237,230,.07); background: #0a0a0a; }
.marquee-track { display: flex; gap: 44px; white-space: nowrap; justify-content: center; }
.marquee-item  { font-family: var(--ff-display); font-size: 20px; letter-spacing: .06em; color: rgba(240,237,230,.22); flex-shrink: 0; }
.marquee-item span { color: #FF5C00; }

/* ── Responsive interior ── */
@media (max-width: 900px) {
  .int-hero    { grid-template-columns: 1fr; }
  .int-hero-stats { border-left: none; border-top: .5px solid rgba(240,237,230,.08); padding-left: 0; padding-top: 32px; display: grid; grid-template-columns: repeat(2,1fr); }
  .roles-grid  { grid-template-columns: repeat(2,1fr); }
  .how-grid    { grid-template-columns: 1fr; }
  .talent-grid { grid-template-columns: repeat(2,1fr); }
  .svc-row     { grid-template-columns: 1fr; gap: 8px; }
  .svc-arrow   { display: none; }
}
@media (max-width: 600px) {
  .photo-hero  { padding: 48px 20px 36px; }
  .int-hero    { padding: 48px 20px; }
  .int-title   { font-size: 52px; }
  .roles       { padding: 48px 20px; }
  .roles-grid  { grid-template-columns: 1fr; }
  .how         { padding: 48px 20px; }
  .talent      { padding: 48px 20px; }
  .talent-grid { grid-template-columns: 1fr; }
  .prod-services { padding: 48px 20px; }
  .quote-block { padding: 48px 20px; }
  .quote-text  { font-size: 36px; }
  .int-hero-stats { grid-template-columns: 1fr; }
  .contact-page { padding: 48px 20px 64px; }
  .contact-title { font-size: 52px; }
  .contact-action-val { font-size: 24px; }
  .cities-strip { padding: 16px 20px; gap: 16px; }
  .marquee-wrap  { padding: 16px 20px; }
  .marquee-track { gap: 20px; }
  .marquee-item  { font-size: 15px; }
}
@media (max-width: 400px) {
  .int-title { font-size: 44px; }
}