/* ==========================================================================
   Four Media AI — custom overrides layered on top of the base template.
   Keep this file separate so future template updates stay easy to re-apply.
   ========================================================================== */

/* Dark theme tokens. Page background, card surfaces, borders and both text
   weights are new; the brand red is untouched on purpose. */
:root {
  --bg: #120E0D;
  --surface: #1C1614;
  --surface-2: #271E1B;
  --border: #3A2E2A;
  --text: #F7F2EF;
  --text-muted: #AFA29C;
}

/* Logo wordmark (replaces the template's own logo files) */
.logo-text {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: "Urbanist", sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.logo-text .accent {
  background: linear-gradient(132deg, #EA2B16 0%, #FF3B26 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo-text .tld {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 15px;
}
footer .logo-text,
.canvas_head .logo-text {
  color: var(--white);
}
footer .logo-text .tld,
.canvas_head .logo-text .tld {
  color: var(--neutral-400);
}

/* Legibility scrim for full-bleed photo sections (hero + contact) so
   headings stay readable over a photograph — dark scrim under light text. */
.section-hero .hero-image::after,
.section-contact .contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(18, 14, 13, 0.72) 0%, rgba(18, 14, 13, 0.5) 42%, rgba(18, 14, 13, 0.66) 100%);
}
.section-contact .contact-image {
  overflow: hidden;
}

/* Text marquee (replaces the placeholder partner-logo strip) */
.marquee-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  margin-right: 16px;
}
.marquee-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

/* Hero stat-chip row (v2: Ground Intelligence positioning). Reuses the
   marquee-chip pill styling above in a static, centered row instead of an
   infinite-scroll strip, so it needs its own spacing/margin reset. */
.hero-stats {
  margin-top: 32px;
}
.hero-stats .marquee-chip {
  margin-right: 0;
}

/* Compact supporting stat line under the About section's headline number */
.trust-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.trust-mini strong {
  color: var(--text);
}
.stat-caption {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--text-muted);
}

/* Founder / heritage line inside the ethos quote card */
.cite .role {
  color: var(--text-muted);
}

/* Pricing: swap the big numeric price for a short word without breaking the
   card's proportions. (Pricing section isn't used on this page, kept in case
   it comes back.) */
.pricing-item .price-number.is-word {
  font-size: 44px;
  line-height: 48px;
}
@media (max-width: 767px) {
  .pricing-item .price-number.is-word {
    font-size: 32px;
    line-height: 36px;
  }
}

/* "Full-Funnel" fanned photo stack in the Why-Us section: give the swapped-in
   photos the rounded-card + shadow treatment the original placeholder art had
   baked in as flat vector/raster shapes. */
.benefits-design-inner img {
  border-radius: 20px;
  box-shadow: 0px 20px 40px 0px rgba(20, 20, 22, 0.18);
  object-fit: cover;
}

/* Industries strip inside the features/why-us area (currently unused, kept
   dark-theme-consistent in case it's reinstated). */
.industries-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.industries-row span {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

/* Contact detail row for the office address / hours (third + fourth items) */
.contact-item .content .text {
  line-height: 22px;
}

/* ==========================================================================
   Dark theme: page base + every light-card/light-text rule from the base
   template that this single-page site actually renders. Selectors match the
   template's own so the cascade (this file loads after styles.css) wins
   without needing extra specificity. Components that were already dark in
   the light-mode design (buttons, icon chips, the Statistics/Work sections,
   the mobile menu overlay) render correctly unchanged and are left alone.
   ========================================================================== */

body {
  background-color: var(--bg);
  color: var(--text);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: var(--text);
}

/* Heading fade / gradient-fill effects, previously tuned for dark text
   fading into a light page. Re-declaring the clip/fill properties here (not
   just `background`) matters: `background` is a shorthand, so a value
   without a trailing box keyword resets background-clip to border-box and
   silently breaks the text-clip effect instead of just changing the color. */
.text-gradient-1 {
  background: linear-gradient(132.09deg, var(--text) 11.15%, var(--text-muted) 79.01%) text;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-2 {
  background: linear-gradient(360deg, rgba(247, 242, 239, 0) 0%, var(--text) 100%) text;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-3 {
  background: linear-gradient(95.5deg, var(--text) 1.91%, var(--text-muted) 43.92%) text;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* About section's two light review cards */
.section-about-us .review-box,
.section-about-us .box-quotes {
  background-color: var(--surface);
}

/* Floating glass nav pill */
.tf-header .header-inner {
  background: rgba(18, 14, 13, 0.55);
}

/* Desktop nav links ("Intelligence", "Sectors", etc.) — same gap as the
   footer social pills: the template never sets a base color for these, so
   they fell back to the vendor's near-black `a { color: var(--primary) }`,
   unreadable against this dark glass header. Hover/active already override
   to the brand red and are untouched. */
.item-link {
  color: var(--text);
}

/* Light "box" wrapper behind the Intelligence + Sectors sections */
.box-white {
  background-color: var(--surface);
}

/* Intelligence accordion rows — collapsed state only. The active/expanded
   row already shows white text over a photo and needs no change. */
.accordion-faq_item {
  background-color: var(--surface);
}
.accordion-faq_item .accordion-title {
  color: var(--text-muted);
}

/* Sectors cards */
.featured-works-item {
  background-color: var(--surface);
}

/* Features cards + the hub-and-spoke connector lines either side of the
   center mark */
.features-item {
  background-color: var(--surface);
}
.side-line-main .link-break-line::after {
  background: var(--bg);
}

/* Center hub mark: template default is a 208x160 rectangle; squared off to
   match the logo art itself (a square glyph), same visual weight (roughly
   equal area to the original box). */
.features-center {
  width: 180px;
  height: 180px;
}

/* "The Shift" process cards */
.process-card {
  background-color: var(--surface);
}

/* Why-Us cards and their mock-UI decoration */
.benefits-box {
  background-color: var(--surface);
}
.benefits-progress-inner .benefits-progress-item .progress-line {
  background-color: var(--surface-2);
}
.benefits-progress-inner .benefits-progress-item .progress-text {
  background-color: var(--surface);
}
.benefits-step-inner .line-step {
  background-color: var(--surface-2);
}
.benefits-step-inner .step-item {
  background-color: var(--surface);
}
.benefits-step-inner .step-item .icon {
  color: var(--text);
}

/* Contact form card + detail-row icon chips */
.form-contact {
  background-color: var(--surface);
}
.section-contact .contact-item .icon {
  background: var(--surface-2);
}
form textarea,
form input[type=text],
form input[type=password],
form input[type=email],
form input[type=tel] {
  color: var(--text);
  border-bottom-color: var(--border);
}
form ::-webkit-input-placeholder { color: var(--text-muted); opacity: 1; }
form ::placeholder { color: var(--text-muted); opacity: 1; }

/* FAQ rows */
.accordion-asked .accordion-asked-item {
  background-color: var(--surface);
}

/* Hero "Scroll for more" tab — hardcoded to the old page-background hex so
   it blends into the bottom edge; point it at the new one instead. The label
   text had the same missing-color gap as the links below (the arrow icon
   already sets its own color and is unaffected). */
.section-hero .scroll-more {
  background-color: var(--bg);
  color: var(--text);
}

/* Footer social pills */
.tf-social-1 a {
  background-color: var(--surface);
  color: var(--text);
}

/* Footer bottom bar: the repeated nav links and "Back to top" never had a
   base color either (same gap as the header nav and social pills above),
   so they inherited the vendor's near-black default. Kept a step quieter
   than the header nav to match the copyright text beside them; hover still
   goes brand red via the template's own .link1:hover rule. */
.footer-links a,
.action-go-top {
  color: var(--text-muted);
}

/* Secondary ("light chip") button — Hero's "See Our Work", Approach's CTA */
.tf-btn-2 {
  background: var(--surface);
  color: var(--text);
}
.tf-btn-2:hover {
  color: var(--brand);
}

/* .text-secondary carries !important in the base template; match it so this
   still wins. */
.text-secondary {
  color: var(--text-muted) !important;
}