/* Free Will Creatives — public site */

:root {
  --deep-ocean: #071A33;
  --horizon-blue: #1FA9E8;
  --sunset-orange: #FFC93C;
  --twilight-purple: #14C4B0;
  --cloud-white: #F7FAFC;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cloud-white); font-family: var(--font-body); color: var(--deep-ocean); }
a { color: var(--horizon-blue); text-decoration: none; }
a:hover { color: var(--sunset-orange); }

.fwc { overflow-x: hidden; }

/* Autoplay videos render blank until the first frame decodes, which
   pops abruptly over whatever placeholder/gradient sits behind them
   (hero backgrounds, tile stripes, page background). Start hidden and
   fade in once app.js marks the frame ready, everywhere on the site. */
video[autoplay] { opacity: 0; transition: opacity 0.5s ease; }
video[autoplay].fwc-video-ready { opacity: 1; }

.fwc-eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 18px; }
.fwc-eyebrow--blue { color: var(--horizon-blue); }
.fwc-eyebrow--orange { color: var(--sunset-orange); }
.fwc-eyebrow--purple { color: var(--twilight-purple); }
.fwc-eyebrow--warm { color: #FFE29A; }

.fwc-h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(30px, 4vw, 46px); margin: 0; line-height: 1.15; }
.fwc-h2--light { color: var(--cloud-white); }
.fwc-h2--center { text-align: center; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; font-family: var(--font-body); text-decoration: none; }
.btn--light { background: var(--cloud-white); color: var(--deep-ocean); }
.btn--light:hover { background: var(--sunset-orange); color: var(--cloud-white); }
.btn--outline-light { border: 1.5px solid rgba(247,250,252,0.6); color: var(--cloud-white); background: transparent; }
.btn--outline-light:hover { border-color: var(--cloud-white); background: rgba(247,250,252,0.1); }
.btn--accent { background: var(--sunset-orange); color: var(--deep-ocean); width: 100%; padding: 16px; border-radius: 999px; font-size: 16px; }
.btn--accent:hover { background: var(--cloud-white); }

.fwc-cta-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--sunset-orange); color: var(--deep-ocean); border-radius: 999px; font-weight: 600; font-family: var(--font-body); text-decoration: none; margin-top: 24px; }
.fwc-cta-btn:hover { background: var(--cloud-white); }

/* ---------- Hero ---------- */

.fwc-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  overflow: hidden;
}

.fwc-hero__bg-gradient {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(200deg, #14C4B0 0%, #FFC93C 45%, #1FA9E8 72%, var(--deep-ocean) 100%);
  background-size: 180% 180%;
  animation: fwc-gradient-shift 22s ease-in-out infinite;
}

@media (max-width: 900px) {
  /* The angled, oversized, animated gradient above can park a solid gold
     band at the top of a narrow/tall viewport depending on animation
     phase. Mobile gets a static, vertical gradient instead — no angle,
     no oversized background-size, no animation — so no phase can ever
     produce a flat colour strip under the sticky nav. */
  .fwc-hero__bg-gradient {
    background: linear-gradient(180deg, var(--deep-ocean) 0%, #14C4B0 45%, #1FA9E8 80%, var(--deep-ocean) 100%);
    background-size: 100% 100%;
    animation: none;
  }
}
.fwc-hero__bg-video, .fwc-hero__bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.fwc-hero__scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(7,26,51,0) 0%, rgba(7,26,51,0.22) 75%, rgba(7,26,51,0.4) 100%); }
.fwc-hero__fade { position: absolute; bottom: 0; left: -5%; width: 110%; height: 42%; z-index: 1; opacity: 0.92; background: linear-gradient(180deg, rgba(7,26,51,0) 0%, var(--deep-ocean) 88%); }
.fwc-hero__horizon-line { position: absolute; left: 0; right: 0; bottom: 6%; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent 0%, rgba(var(--fwc-accent-rgb, 255,201,60), 0.95) 50%, transparent 100%); box-shadow: 0 0 24px 2px rgba(var(--fwc-accent-rgb, 255,201,60), 0.75); animation: fwc-glow-pulse 6s ease-in-out infinite; }

.fwc-hero__logo { position: relative; z-index: 2; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 0 20px; box-shadow: 0 0 0 4px rgba(247,250,252,0.35), 0 10px 30px rgba(7,26,51,0.4); }

.fwc-hero__kicker { position: relative; z-index: 2; font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cloud-white); opacity: 0.75; margin: 0 0 22px; }
.fwc-hero__title { position: relative; z-index: 2; font-family: var(--font-heading); font-weight: 700; font-size: clamp(48px,8vw,96px); margin: 0; line-height: 1.02; color: var(--cloud-white); text-shadow: 0 4px 40px rgba(0,0,0,0.35); animation: fwc-title-pulse 10s ease-in-out infinite; }
.fwc-hero__tagline { position: relative; z-index: 2; font-family: var(--font-heading); font-weight: 500; font-size: clamp(20px,2.4vw,30px); color: var(--cloud-white); margin: 22px 0 8px; }
.fwc-hero__sub { position: relative; z-index: 2; max-width: 560px; font-size: 17px; color: var(--cloud-white); opacity: 0.85; margin: 0 0 40px; line-height: 1.6; }
.fwc-hero__ctas { position: relative; z-index: 2; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

.fwc-hero__top { display: flex; flex-direction: column; align-items: center; }
.fwc-hero__top--logo_left, .fwc-hero__top--logo_right { flex-direction: row; align-items: center; gap: 24px; text-align: left; }
.fwc-hero__top--logo_right { flex-direction: row-reverse; }
.fwc-hero__top--logo_left .fwc-hero__logo, .fwc-hero__top--logo_right .fwc-hero__logo { margin: 0; flex: 0 0 auto; }
.fwc-hero__top-text { display: flex; flex-direction: column; }
@media (max-width: 700px) { .fwc-hero__top--logo_left, .fwc-hero__top--logo_right { flex-direction: column; text-align: center; } }
.fwc-hero__title--no-pulse { animation: none; }

@keyframes fwc-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fwc-glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes fwc-title-pulse { 0%, 100% { color: var(--cloud-white); transform: scale(1); } 25% { color: #FFC49A; transform: scale(1.015); } 50% { color: #C6B4EE; transform: scale(1); } 75% { color: #9FCBEC; transform: scale(1.015); } }

/* ---------- Story ---------- */

.fwc-story { position: relative; overflow: hidden; padding: 72px 48px; color: var(--cloud-white); }
.fwc-story__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #6B5B95 0%, #B565A7 32%, #F2836B 62%, #FFC93C 84%, var(--deep-ocean) 100%); background-size: 180% 180%; animation: fwc-gradient-shift 22s ease-in-out infinite; }
.fwc-story__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(7,26,51,0.4); }
.fwc-story__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.fwc-story__copy { font-size: 18px; line-height: 1.75; max-width: 680px; color: rgba(247,250,252,0.85); margin: 0 0 40px; }
.fwc-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fwc-story__photo { width: 100%; height: 340px; border-radius: 16px; object-fit: cover; display: block; }
.fwc-story__photo--placeholder { display: flex; align-items: center; justify-content: center; }
.fwc-story__photo--placeholder span { font-family: 'Courier New', monospace; font-size: 13px; color: var(--cloud-white); opacity: 0.9; background: rgba(7,26,51,0.35); padding: 6px 12px; border-radius: 6px; }
.fwc-story__photo--purple { background: repeating-linear-gradient(135deg, #14C4B0 0 14px, #0e8f80 14px 28px); }
.fwc-story__photo--blue { background: repeating-linear-gradient(135deg, #1FA9E8 0 14px, #1678a8 14px 28px); }
.fwc-story__caption { font-family: var(--font-heading); font-weight: 600; margin: 16px 0 0; font-size: 16px; color: var(--cloud-white); }
.fwc-story__tag { text-align: center; margin: 36px 0 0; font-family: var(--font-heading); font-weight: 600; color: #FFE29A; font-size: 15px; }

/* ---------- Services ---------- */

.fwc-services { position: relative; overflow: hidden; padding: 72px 48px; }
.fwc-services__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(200deg, #14C4B0 0%, #FFC93C 45%, #1FA9E8 72%, var(--deep-ocean) 100%); background-size: 180% 180%; animation: fwc-gradient-shift 22s ease-in-out infinite; }
.fwc-services__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(7,26,51,0.68); }
.fwc-services__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.fwc-service-group { margin-bottom: 36px; }
.fwc-service-group__title { font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 18px; }
.fwc-service-group__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fwc-service-card { display: block; text-decoration: none; color: inherit; background: rgba(247,250,252,0.05); border: 1px solid rgba(247,250,252,0.1); border-radius: 14px; padding: 24px; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.fwc-service-card:hover { transform: scale(1.035); background: rgba(247,250,252,0.09); border-color: rgba(255,201,60,0.45); box-shadow: 0 10px 30px rgba(7,26,51,0.35); animation: fwc-card-pulse 1.6s ease-in-out infinite; }
.fwc-service-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--cloud-white); margin: 0 0 8px; }
.fwc-service-card__desc { font-size: 14.5px; color: rgba(247,250,252,0.7); margin: 0; line-height: 1.55; }

@keyframes fwc-card-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(7,26,51,0.35); }
  50%      { box-shadow: 0 10px 42px rgba(255,201,60,0.3); }
}

/* ---------- Portfolio mini (home) ---------- */

.fwc-portfolio-mini { position: relative; overflow: hidden; padding: 72px 48px; }
.fwc-portfolio-mini__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(200deg, #8B5CF6 0%, #FF7A45 45%, #E63958 72%, var(--deep-ocean) 100%); background-size: 180% 180%; animation: fwc-gradient-shift 22s ease-in-out infinite; }
.fwc-portfolio-mini__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(7,26,51,0.5); }
.fwc-portfolio-mini__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.fwc-portfolio-mini__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.fwc-portfolio-mini__head .fwc-h2 { color: var(--cloud-white); }
.fwc-link { color: #FFD18C; font-weight: 600; font-size: 15px; }
.fwc-link:hover { color: var(--sunset-orange); }
.fwc-portfolio-mini__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.fwc-crossfade-col { position: relative; height: 340px; border-radius: 16px; overflow: hidden; background: #e8ecf1; }
.fwc-crossfade-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1.2s ease; }
.fwc-crossfade-frame.is-active { opacity: 1; }
.fwc-crossfade-frame img, .fwc-crossfade-frame video { width: 100%; height: 100%; object-fit: cover; }
.fwc-crossfade-frame span { font-family: 'Courier New', monospace; font-size: 12px; color: var(--cloud-white); background: rgba(7,26,51,0.4); padding: 5px 10px; border-radius: 6px; }
.fwc-frame-tag-image { background: repeating-linear-gradient(135deg, var(--horizon-blue) 0 14px, #235a92 14px 28px); }
.fwc-frame-tag-video { background: repeating-linear-gradient(135deg, var(--sunset-orange) 0 14px, #e8703a 14px 28px); }

/* ---------- Social ---------- */

.fwc-social { position: relative; overflow: hidden; padding: 64px 48px; text-align: center; }
.fwc-social__bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, #6B5B95 0%, #B565A7 32%, #F2836B 62%, #FFC93C 84%, var(--deep-ocean) 100%); background-size: 180% 180%; animation: fwc-gradient-shift 22s ease-in-out infinite; }
.fwc-social__scrim { position: absolute; inset: 0; z-index: 1; background: rgba(7,26,51,0.35); }
.fwc-social__inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; }
.fwc-social .fwc-eyebrow { margin-bottom: 44px; }
.fwc-social__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.fwc-social__tile { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; text-align: left; box-shadow: 0 10px 28px rgba(7,26,51,0.22); background-size: 180% 180%; animation: fwc-gradient-shift 12s ease-in-out infinite; }
.fwc-social__card-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.fwc-social__avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--cloud-white); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fwc-social__avatar svg { width: 12px; height: 12px; }
.fwc-social__handle { font-size: 12px; font-weight: 600; color: var(--cloud-white); }
.fwc-social__media { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fwc-social__media img { width: 100%; height: 100%; object-fit: cover; }
.fwc-social__media > span { position: relative; z-index: 2; font-family: 'Courier New', monospace; font-size: 11px; color: var(--cloud-white); opacity: 0.7; }
.fwc-social__caption { font-size: 12px; color: rgba(247,250,252,0.85); padding: 12px 12px; margin: 0; }

/* The card's own background is the moving brand gradient (covers the
   head bar and caption strip too, not just the media area) — the
   media box is transparent so it shows through when there's no photo.
   Once a real photo is uploaded, this overlay sits on top of it (z-index
   above the <img>) so the accent keeps showing instead of being hidden
   behind the photo. */
.fwc-social__media-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay; background-size: 180% 180%; animation: fwc-gradient-shift 12s ease-in-out infinite; }

/* ---------- Floating social widget ---------- */

.fwc-social-float { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 12px; }
.fwc-social-float__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--deep-ocean); background-size: 180% 180%; animation: fwc-gradient-shift 12s ease-in-out infinite; display: flex; align-items: center; justify-content: center; color: var(--cloud-white); box-shadow: 0 4px 14px rgba(7,26,51,0.3); transition: transform 0.2s ease; }
.fwc-social-float__icon:hover { transform: scale(1.08); }
.fwc-social-float__icon svg { width: 20px; height: 20px; }
.fwc-social-float__icon:focus-visible { outline: 2px solid var(--horizon-blue); outline-offset: 2px; }

@media (max-width: 480px) {
  .fwc-social-float { right: 10px; gap: 8px; }
  .fwc-social-float__icon { width: 36px; height: 36px; }
  .fwc-social-float__icon svg { width: 16px; height: 16px; }
}

/* Each platform's own moving brand-colour gradient — same technique as
   .fwc-hero__bg-gradient/.fwc-story__bg, just tinted per platform
   instead of the site's teal/gold/blue. Shared by the card tile, its
   photo overlay, and the matching floating icon — one definition per
   platform rather than repeating the gradient per consumer. Card
   avatar becomes a plain white badge with the icon in a solid brand
   colour, so it stays legible regardless of where the card's own
   gradient happens to be. */
.fwc-social__tile--instagram,
.fwc-social__tile--instagram .fwc-social__media-tint,
.fwc-social-float__icon--instagram { background: linear-gradient(135deg, #405DE6 0%, #833AB4 30%, #C13584 60%, #FD1D1D 80%, #FCAF45 100%); }
.fwc-social__tile--instagram .fwc-social__avatar { color: #C13584; }
.fwc-social__tile--youtube,
.fwc-social__tile--youtube .fwc-social__media-tint,
.fwc-social-float__icon--youtube { background: linear-gradient(135deg, #FF0000 0%, #CC0000 45%, #990000 100%); }
.fwc-social__tile--youtube .fwc-social__avatar { color: #CC0000; }
.fwc-social__tile--linkedin,
.fwc-social__tile--linkedin .fwc-social__media-tint,
.fwc-social-float__icon--linkedin { background: linear-gradient(135deg, #0A66C2 0%, #0077B5 50%, #00A0DC 100%); }
.fwc-social__tile--linkedin .fwc-social__avatar { color: #0A66C2; }
.fwc-social__tile--x,
.fwc-social__tile--x .fwc-social__media-tint,
.fwc-social-float__icon--x { background: linear-gradient(135deg, #000000 0%, #333333 45%, #000000 100%); }
.fwc-social__tile--x .fwc-social__avatar { color: #000000; }
.fwc-social__tile--discord,
.fwc-social__tile--discord .fwc-social__media-tint,
.fwc-social-float__icon--discord { background: linear-gradient(135deg, #7289DA 0%, #5865F2 50%, #404EED 100%); }
.fwc-social__tile--discord .fwc-social__avatar { color: #5865F2; }
.fwc-social__tile--tiktok,
.fwc-social__tile--tiktok .fwc-social__media-tint,
.fwc-social-float__icon--tiktok { background: linear-gradient(135deg, #25F4EE 0%, #000000 50%, #FE2C55 100%); }
.fwc-social__tile--tiktok .fwc-social__avatar { color: #FE2C55; }

/* ---------- Contact ---------- */

.fwc-contact { padding: 72px 48px 64px; background: var(--deep-ocean); color: var(--cloud-white); }
.fwc-contact__inner { max-width: 640px; margin: 0 auto; text-align: center; }
.fwc-contact__sub { color: rgba(247,250,252,0.7); font-size: 16px; margin: 0 0 48px; }
.fwc-contact__form { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.fwc-contact__form input, .fwc-contact__form textarea, .fwc-contact__form select {
  padding: 15px 18px; border-radius: 10px; border: 1px solid rgba(247,250,252,0.25);
  background: rgba(247,250,252,0.06); color: var(--cloud-white); font-size: 15px; font-family: var(--font-body);
}
.fwc-contact__form textarea { resize: vertical; }
.fwc-contact__form select option { color: var(--deep-ocean); background: var(--cloud-white); }
.fwc-field-error { color: #ffb4b4; font-size: 12px; margin-top: -8px; }
.fwc-field-error:empty { display: none; margin: 0; }
.fwc-contact__done { padding: 48px 24px; border-radius: 16px; background: rgba(255,138,76,0.12); border: 1px solid rgba(255,138,76,0.3); }
.fwc-contact__done p { font-family: var(--font-heading); font-weight: 600; font-size: 20px; margin: 0; }
.fwc-contact__done--partial { background: rgba(212,167,44,0.12); border-color: rgba(212,167,44,0.35); }
.fwc-contact__form[hidden], .fwc-contact__done[hidden] { display: none; }

/* ---------- Portfolio page ---------- */

.fwc-portfolio-hero { padding: 96px 48px 64px; background: linear-gradient(200deg, var(--twilight-purple) 0%, var(--sunset-orange) 45%, var(--horizon-blue) 72%, var(--deep-ocean) 100%); }
.fwc-portfolio-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(38px,5.6vw,72px); color: var(--cloud-white); margin: 0; max-width: 820px; line-height: 1.08; }
.fwc-portfolio-hero__subtitle { font-size: 17px; color: rgba(247,250,252,0.82); max-width: 560px; margin: 18px 0 0; line-height: 1.6; }

/* Service page hero — same box as above, but supports an uploaded
   image/video as the banner background (falls back to the gradient
   above when a service has no hero media set) instead of a separate
   media block below the title. */
.fwc-portfolio-hero--media { position: relative; overflow: hidden; }
.fwc-portfolio-hero__content { position: relative; z-index: 2; }

/* Show reel filmstrip — decorative (aria-hidden), purely CSS-driven.
   The track renders the item list twice back to back; animating exactly
   -50% therefore scrolls through one full, unduplicated set before
   looping, so it's seamless for any number of items with no JS. */
.fwc-reel-strip { position: relative; overflow: hidden; background: var(--deep-ocean); padding: 28px 0; }
.fwc-reel-strip::before, .fwc-reel-strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none; }
.fwc-reel-strip::before { left: 0; background: linear-gradient(90deg, var(--deep-ocean) 0%, transparent 100%); }
.fwc-reel-strip::after { right: 0; background: linear-gradient(270deg, var(--deep-ocean) 0%, transparent 100%); }
/* No hover-pause here on purpose: this strip is decorative and
   aria-hidden (the real, accessible content is the grid below), and it
   spans nearly the full viewport width — pausing on hover made the
   animation stop almost any time the cursor crossed the top of the
   page, which read as random freezing rather than a deliberate pause. */
.fwc-reel-strip__track { display: flex; gap: 16px; width: max-content; animation: fwc-reel-scroll 38s linear infinite; }
.fwc-reel-strip__frame { position: relative; flex: 0 0 auto; width: 220px; height: 130px; border-radius: 12px; overflow: hidden; background: rgba(247,250,252,0.06); }
.fwc-reel-strip__frame img, .fwc-reel-strip__frame video { width: 100%; height: 100%; object-fit: cover; }
@keyframes fwc-reel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fwc-portfolio-gallery { padding: 32px 48px 80px; max-width: 1280px; margin: 0 auto; }
.fwc-portfolio-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fwc-portfolio-cell--big { grid-column: span 2; }

/* Reveal-on-scroll — scoped under .js so a no-JS visitor (or a failed
   script load) always sees the grid, never a permanently-hidden card.
   See the matching IntersectionObserver in app.js. */
.js .fwc-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .fwc-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Each card gets a thin animated brand-gradient "frame" (the padding
   below reveals the gradient as a border), cycling through a fixed set
   of on-palette combos by grid position — same moving-gradient technique
   as .fwc-social__tile--*, just keyed by index instead of platform. */
.fwc-portfolio-tile {
  position: relative; padding: 3px; border-radius: 19px;
  background-size: 180% 180%; animation: fwc-gradient-shift 16s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fwc-portfolio-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(7,26,51,0.3); }
/* Same duration for every card, but a negative delay per accent so the
   four variants aren't all at the same point in the cycle at once —
   a grid full of cards pulsing in lockstep reads as one flashing block
   instead of ambient motion (see animated-brand-gradient-system.md). */
.fwc-portfolio-tile--accent-0 { background-image: linear-gradient(135deg, var(--horizon-blue) 0%, var(--twilight-purple) 55%, var(--deep-ocean) 100%); animation-delay: 0s; }
.fwc-portfolio-tile--accent-1 { background-image: linear-gradient(135deg, var(--sunset-orange) 0%, #FF7A45 45%, var(--deep-ocean) 100%); animation-delay: -4s; }
.fwc-portfolio-tile--accent-2 { background-image: linear-gradient(135deg, var(--twilight-purple) 0%, var(--horizon-blue) 55%, var(--deep-ocean) 100%); animation-delay: -8s; }
.fwc-portfolio-tile--accent-3 { background-image: linear-gradient(135deg, var(--sunset-orange) 0%, var(--twilight-purple) 50%, var(--horizon-blue) 100%); animation-delay: -12s; }
.fwc-portfolio-tile__link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.fwc-portfolio-tile__link:focus-visible { outline: 2px solid var(--cloud-white); outline-offset: 2px; }
.fwc-portfolio-tile__frame { position: relative; height: 320px; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--deep-ocean); }
.fwc-portfolio-tile__frame img, .fwc-portfolio-tile__frame video { width: 100%; height: 100%; object-fit: cover; }
.fwc-portfolio-tile__placeholder { font-family: 'Courier New', monospace; font-size: 13px; color: var(--cloud-white); opacity: 0.9; background: rgba(7,26,51,0.35); padding: 6px 12px; border-radius: 6px; }
.fwc-portfolio-tile__overlay {
  position: absolute; inset: 0; background: rgba(7,26,51,0.88); opacity: 0; transition: opacity 0.25s ease;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px;
}
.fwc-portfolio-tile:hover .fwc-portfolio-tile__overlay { opacity: 1; }
.fwc-portfolio-tile__client { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sunset-orange); margin: 0 0 6px; }
.fwc-portfolio-tile__name { font-family: var(--font-heading); font-weight: 700; font-size: 19px; color: var(--cloud-white); margin: 0 0 6px; }
.fwc-portfolio-tile__what { font-size: 13.5px; color: rgba(247,250,252,0.75); margin: 0 0 4px; }
.fwc-portfolio-tile__result { font-size: 13.5px; color: var(--sunset-orange); margin: 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fwc-reel-strip__track { animation: none; }
  .fwc-portfolio-tile { animation: none; }
  .js .fwc-reveal { opacity: 1; transform: none; transition: none; }
  .fwc-block-quotation__frame { animation: none; }
}

.fwc-contact--cta { text-align: center; padding: 100px 48px; }

/* ---------- Footer / legal ---------- */

.fwc-footer { padding: 32px 48px; text-align: center; background: var(--deep-ocean); color: rgba(247,250,252,0.4); font-size: 13px; border-top: 1px solid rgba(247,250,252,0.08); }
.fwc-footer a { color: rgba(247,250,252,0.6); }
.fwc-footer a:hover { color: var(--cloud-white); }

.fwc-legal { max-width: 720px; margin: 0 auto; padding: 72px 48px; line-height: 1.7; }
.fwc-legal h1 { font-family: var(--font-heading); }
.fwc-legal h2 { font-family: var(--font-heading); font-size: 20px; margin: 36px 0 12px; color: var(--deep-ocean); }
.fwc-legal__updated { color: rgba(7,26,51,0.55); font-size: 13px; margin: -8px 0 32px; }
.fwc-legal ul { padding-left: 22px; margin: 0 0 16px; }
.fwc-legal li { margin-bottom: 6px; }

/* ---------- Cookie banner ---------- */

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: var(--deep-ocean); color: var(--cloud-white);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(247,250,252,0.15);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; font-size: 13px; max-width: 640px; }
.cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn--small { padding: 9px 16px; font-size: 13px; border-radius: 6px; }
.btn--ghost { background: rgba(247,250,252,0.1); color: var(--cloud-white); }
.btn--primary { background: var(--sunset-orange); color: var(--deep-ocean); }

/* ---------- Nav ---------- */

.fwc-nav { position: sticky; top: 0; z-index: 50; background: var(--deep-ocean); border-bottom: 1px solid rgba(247,250,252,0.08); }
.fwc-nav__inner { max-width: 1220px; margin: 0 auto; padding: 14px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.fwc-nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--cloud-white); }
.fwc-nav__brand:hover { color: var(--cloud-white); }
.fwc-nav__logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.fwc-nav__links { display: flex; align-items: center; gap: 8px; }
.fwc-nav__link { font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: rgba(247,250,252,0.75); padding: 8px 14px; border-radius: 999px; transition: color 0.2s ease, background 0.2s ease; }
.fwc-nav__link:hover { color: var(--cloud-white); background: rgba(247,250,252,0.08); }
.fwc-nav__link.is-active { color: var(--deep-ocean); background: var(--sunset-orange); }
.fwc-nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; border: none; background: transparent; cursor: pointer; padding: 0; }
.fwc-nav__toggle-bar { display: block; width: 100%; height: 2px; background: var(--cloud-white); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.fwc-nav__toggle.is-open .fwc-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fwc-nav__toggle.is-open .fwc-nav__toggle-bar:nth-child(2) { opacity: 0; }
.fwc-nav__toggle.is-open .fwc-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .fwc-nav__toggle { display: flex; }
  .fwc-nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--deep-ocean); border-bottom: 1px solid rgba(247,250,252,0.08);
    padding: 8px 24px 16px; gap: 2px; max-height: 0; overflow: hidden;
    /* max-height + overflow:hidden alone can still leak a sliver of the
       active link's pill background on some mobile browsers (a known
       compositing quirk with zero-height absolutely-positioned overflow
       containers) — visibility guarantees it's truly not painted while
       collapsed, delayed so it only hides once the close animation
       finishes rather than snapping instantly. */
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }
  .fwc-nav__links.is-open { max-height: 320px; visibility: visible; transition: max-height 0.25s ease; }
  .fwc-nav__link { padding: 12px 8px; border-radius: 8px; }
}

@media (max-width: 900px) {
  .fwc-service-group__grid, .fwc-portfolio-mini__grid { grid-template-columns: 1fr; }
  .fwc-social__grid { grid-template-columns: repeat(2, 1fr); }
  .fwc-portfolio-gallery__grid { grid-template-columns: 1fr; }
  .fwc-portfolio-cell--big { grid-column: span 1; }
  .fwc-reel-strip::before, .fwc-reel-strip::after { width: 60px; }
  .fwc-reel-strip__frame { width: 160px; height: 96px; }
  /* Shrink rather than stack — the two founder videos/photos stay side
     by side at every width instead of dropping to one per row. */
  .fwc-story__grid { gap: 16px; }
  .fwc-story__photo { height: 220px; }
}

@media (max-width: 480px) {
  .fwc-social__grid { grid-template-columns: 1fr; max-width: 340px; }
  .fwc-story__grid { gap: 10px; }
  .fwc-story__photo { height: 140px; }
  .fwc-story__caption { font-size: 13px; margin-top: 8px; }
}

/* ---------- Content blocks (Our Story / future News / Service pages) ---------- */

.fwc-block-media { padding: 56px 48px; text-align: center; }
.fwc-block-media img, .fwc-block-media video { max-width: 100%; border-radius: 16px; }

.fwc-block-text { max-width: 760px; margin: 0 auto; padding: 40px 48px; font-size: 17px; line-height: 1.75; color: var(--deep-ocean); }

.fwc-block-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 56px 48px; }
.fwc-block-split--right { direction: rtl; }
.fwc-block-split--right > * { direction: ltr; }
.fwc-block-split img, .fwc-block-split video { width: 100%; border-radius: 16px; }
.fwc-block-split__text { font-size: 16px; line-height: 1.7; color: var(--deep-ocean); }

.fwc-block-gallery { max-width: 1120px; margin: 0 auto; padding: 56px 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fwc-block-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 14px; }

.fwc-block-cta { text-align: center; padding: 80px 48px; background: var(--deep-ocean); color: var(--cloud-white); }


.fwc-block-stats { max-width: 1120px; margin: 0 auto; padding: 56px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; text-align: center; }
.fwc-block-stats__value { font-family: var(--font-heading); font-weight: 700; font-size: clamp(32px, 4vw, 48px); color: var(--deep-ocean); margin: 0 0 8px; }
.fwc-block-stats__label { font-size: 14.5px; color: rgba(7,26,51,0.65); margin: 0; }

.fwc-block-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1120px; margin: 0 auto; padding: 56px 48px; }
.fwc-block-two-column__col { font-size: 16px; line-height: 1.7; color: var(--deep-ocean); }

.fwc-block-quotation { max-width: 900px; margin: 0 auto; padding: 64px 48px; text-align: center; }

/* Gradient "frame" is the exact same stops/animation as the homepage
   hero (.fwc-hero__bg-gradient) — a thin animated-gradient outer layer
   with the inner box's solid background inset by its padding, so the
   gradient only ever shows as a border ring, not a filled background. */
.fwc-block-quotation__frame {
  padding: 3px;
  border-radius: 20px;
  background: linear-gradient(200deg, #14C4B0 0%, #FFC93C 45%, #1FA9E8 72%, var(--deep-ocean) 100%);
  background-size: 180% 180%;
  animation: fwc-gradient-shift 22s ease-in-out infinite;
}
.fwc-block-quotation__box { background: var(--cloud-white); border-radius: 17px; padding: 48px 40px; }
.fwc-block-quotation__mark { font-family: var(--font-heading); font-size: 64px; line-height: 1; color: var(--sunset-orange); margin: 0 0 8px; }
.fwc-block-quotation__text { font-family: var(--font-heading); font-weight: 600; font-size: clamp(22px, 3vw, 32px); font-style: italic; color: var(--deep-ocean); line-height: 1.4; margin: 0; }
.fwc-block-quotation__attribution { margin-top: 20px; font-size: 14px; color: rgba(7,26,51,0.6); font-weight: 600; }

.fwc-story__readmore { display: inline-block; margin: -20px 0 32px; }

@media (max-width: 900px) {
  .fwc-block-split, .fwc-block-split--right, .fwc-block-two-column { grid-template-columns: 1fr; direction: ltr; }
  .fwc-block-gallery { grid-template-columns: 1fr; }
}

/* ---------- News page ---------- */

.fwc-news-toolbar { max-width: 1120px; margin: 0 auto; padding: 32px 48px 0; display: flex; justify-content: flex-end; }
/* Reused on the show reel, but sitting between the dark filmstrip and the
   grid rather than under the News hero — needs its own breathing room on
   both edges instead of relying on a neighboring section's padding. */
.fwc-news-toolbar--reel { padding: 20px 48px; }
.fwc-news-search { display: flex; gap: 8px; }
.fwc-news-search input[type="search"] { padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(7,26,51,0.15); font-family: var(--font-body); font-size: 14px; min-width: 240px; }
.fwc-news-search input[type="search"]:focus { outline: none; border-color: var(--horizon-blue); }

.fwc-news-featured { max-width: 1120px; margin: 0 auto; padding: 40px 48px 0; }
.fwc-news-featured__card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; background: var(--deep-ocean); border-radius: 20px; overflow: hidden; color: var(--cloud-white); }
.fwc-news-featured__media { height: 100%; min-height: 280px; }
.fwc-news-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.fwc-news-featured__body { padding: 40px; }
.fwc-news-featured__date { font-size: 13px; color: rgba(247,250,252,0.6); margin: 0 0 10px; }
.fwc-news-featured__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(24px,3vw,34px); margin: 0 0 12px; color: var(--cloud-white); }
.fwc-news-featured__excerpt { font-size: 15px; line-height: 1.6; color: rgba(247,250,252,0.8); margin: 0 0 20px; }

.fwc-news-grid { max-width: 1120px; margin: 0 auto; padding: 48px 48px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.fwc-news-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid rgba(7,26,51,0.08); box-shadow: 0 8px 24px rgba(7,26,51,0.06); }
.fwc-news-card__media { height: 180px; background: rgba(7,26,51,0.05); }
.fwc-news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fwc-news-card__body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.fwc-news-card__date { font-size: 12px; color: rgba(7,26,51,0.5); margin: 0 0 8px; }
.fwc-news-card__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin: 0 0 10px; line-height: 1.3; color: var(--deep-ocean); }
.fwc-news-card__excerpt { font-size: 14px; line-height: 1.6; color: rgba(7,26,51,0.65); margin: 0 0 16px; flex: 1; }

.fwc-news-empty { text-align: center; padding: 64px 48px; color: rgba(7,26,51,0.5); grid-column: 1 / -1; }

.fwc-news-hero { max-width: 1120px; margin: 0 auto; padding: 40px 48px 0; text-align: center; }
.fwc-news-hero img, .fwc-news-hero video { border-radius: 16px; }
.fwc-news-hero--sm img, .fwc-news-hero--sm video { width: 360px; max-width: 100%; }
.fwc-news-hero--md img, .fwc-news-hero--md video { width: 640px; max-width: 100%; }
.fwc-news-hero--lg img, .fwc-news-hero--lg video { width: 960px; max-width: 100%; }
.fwc-news-hero--full img, .fwc-news-hero--full video { width: 100%; }

.fwc-pagination { display: flex; justify-content: center; gap: 12px; padding: 0 48px 64px; }
.fwc-pagination a, .fwc-pagination span { padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; border: 1.5px solid rgba(7,26,51,0.15); color: var(--deep-ocean); }
.fwc-pagination a:hover { border-color: var(--horizon-blue); color: var(--horizon-blue); }
.fwc-pagination span[aria-disabled] { opacity: 0.35; }

@media (max-width: 900px) {
  .fwc-news-featured__card { grid-template-columns: 1fr; }
  .fwc-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fwc-news-grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ accordion ---------- */

.fwc-faq { padding: 64px 48px; }
.fwc-faq__inner { max-width: 800px; margin: 0 auto; }
.fwc-faq__inner .fwc-h2 { color: var(--deep-ocean); margin-bottom: 8px; }

.fwc-faq-accordion { margin-top: 32px; }

.fwc-faq-item { border-bottom: 1px solid rgba(7,26,51,0.12); }
.fwc-faq-item__heading { margin: 0; }

.fwc-faq-item__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 4px; background: none; border: none; cursor: pointer;
  text-align: left; font-family: var(--font-heading); font-weight: 600; font-size: 17px;
  color: var(--deep-ocean);
}
.fwc-faq-item__trigger:focus-visible { outline: 2px solid var(--horizon-blue); outline-offset: 2px; }

.fwc-faq-item__icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.fwc-faq-item__icon::before, .fwc-faq-item__icon::after {
  content: ''; position: absolute; top: 50%; left: 50%; background: var(--horizon-blue);
  transition: transform 0.25s ease;
}
.fwc-faq-item__icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.fwc-faq-item__icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.fwc-faq-item.is-open .fwc-faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); }

.fwc-faq-item__panel {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease;
}
.fwc-faq-item.is-open .fwc-faq-item__panel { grid-template-rows: 1fr; }
.fwc-faq-item__panel-inner {
  overflow: hidden; padding: 0 4px; font-size: 15px; line-height: 1.7; color: rgba(7,26,51,0.75);
}
.fwc-faq-item.is-open .fwc-faq-item__panel-inner { padding-bottom: 20px; }
.fwc-faq-item__panel-inner ul, .fwc-faq-item__panel-inner ol { padding-left: 20px; margin: 8px 0; }
.fwc-faq-item__panel-inner a { color: var(--horizon-blue); }