/* ==========================================================================
   WebFoundry Labs — PRIME pass (October 2026)
   The final refinement layer, loaded after cinematic / pinnacle v3 / v3.2.
   Purpose: legibility, collision-free layouts, one icon language, calmer
   typography and consistent alignment. No routes, forms, endpoints or
   product logic are touched here.
   ========================================================================== */

:root {
  --prime-ink: #050d1b;
  --prime-navy: #071426;
  --prime-text-on-dark: #eef4fd;
  --prime-muted-on-dark: #c3d1e4;
  --prime-muted-on-light: #4a5a72;
  --prime-gold: #f5c56f;
  --prime-gold-deep: #e2a944;
  --prime-electric: #5b8cff;
  --prime-hairline-dark: rgba(158, 186, 226, .22);
  --prime-container: min(1290px, calc(100vw - 48px));
  --prime-gutter: max(24px, calc((100vw - 1290px) / 2));
  --prime-ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 800px) { :root { --prime-container: min(1290px, calc(100vw - 36px)); --prime-gutter: 18px; } }
@media (max-width: 540px) { :root { --prime-container: min(1290px, calc(100vw - 28px)); --prime-gutter: 14px; } }

/* --------------------------------------------------------------------------
   1. Type: Inter (variable, optical sizing) everywhere; Bodoni for accents.
   -------------------------------------------------------------------------- */
body.wfl-cinematic {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  font-optical-sizing: auto;
}
body.wfl-cinematic :is(h1, h2) { font-feature-settings: "cv11", "ss01", "ss03"; }
body.wfl-cinematic :is(p, li) { text-wrap: pretty; }
body.wfl-cinematic :is(h1, h2, h3) { text-wrap: balance; }

/* --------------------------------------------------------------------------
   2. Icon system. Inline icons sit on the text baseline and scale with text.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .wfl-glyph {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -.14em;
  overflow: visible;
}
body.wfl-cinematic :is(a, button) .wfl-glyph-arrow-up-right,
body.wfl-cinematic :is(a, button) .wfl-glyph-arrow-right { transition: transform .28s var(--prime-ease); }
body.wfl-cinematic :is(a, button):hover .wfl-glyph-arrow-up-right { transform: translate(2px, -2px); }
body.wfl-cinematic :is(a, button):hover .wfl-glyph-arrow-right { transform: translateX(3px); }
body.wfl-cinematic .btn > b,
body.wfl-cinematic .btn > span[aria-hidden] { display: inline-flex; align-items: center; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  body.wfl-cinematic :is(a, button):hover .wfl-glyph { transform: none !important; }
}

/* --------------------------------------------------------------------------
   3. Generic page heroes: screenshots become atmosphere, never competition.
   The artwork fades in from the copy column, is dimmed, and the heading is
   kept to the copy column so it can never sit on top of baked-in UI text.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .page-hero { min-height: 500px; overflow: hidden; }
/* The screenshot is presented as a framed, tilted preview on the right —
   the same language as the product heroes — instead of a full-bleed wash. */
body.wfl-cinematic .page-hero::after {
  inset: auto;
  left: calc(var(--prime-gutter) + .6 * var(--prime-container));
  right: -6%;
  top: 13%;
  width: auto;
  height: 74%;
  border-radius: 20px;
  border: 1px solid rgba(180, 201, 249, .30);
  box-shadow: 0 40px 110px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 255, 255, .03);
  background-image:
    linear-gradient(90deg, rgba(4, 12, 26, .70) 0%, rgba(4, 12, 26, .25) 40%, rgba(4, 12, 26, 0) 70%),
    linear-gradient(0deg, rgba(4, 12, 26, .55) 0%, transparent 40%),
    var(--cin-hero-image);
  background-size: cover;
  background-position: left top;
  opacity: .78;
  filter: saturate(1.02) brightness(.88);
  transform: perspective(1200px) rotateY(-13deg) rotateZ(1.2deg);
  transform-origin: left center;
  -webkit-mask-image: none;
  mask-image: none;
}
body.wfl-cinematic .page-hero h1 {
  max-width: 10.8em;
  font-size: clamp(44px, 5vw, 74px);
  color: #fff;
  text-shadow: 0 2px 4px rgba(2, 8, 20, .35), 0 12px 48px rgba(2, 8, 20, .55);
}
body.wfl-cinematic .page-hero h1 em {
  padding-right: .06em; /* italic overhang never clips */
}
body.wfl-cinematic .page-hero p { max-width: 560px; color: #e6eef9; }
body.wfl-cinematic .page-hero .eyebrow { color: var(--prime-gold); }
body.wfl-cinematic .page-hero .container > :is(h1, p, .page-actions, .eyebrow) { position: relative; z-index: 2; }
body.wfl-cinematic .page-hero h1 { max-width: min(10.8em, 60%); }
body.wfl-cinematic .page-hero p { max-width: min(560px, 58%); }
@media (max-width: 1050px) {
  body.wfl-cinematic .page-hero::after { opacity: .45; }
  body.wfl-cinematic .page-hero h1 { max-width: min(11em, 72%); }
  body.wfl-cinematic .page-hero p { max-width: min(560px, 68%); }
}
@media (max-width: 800px) {
  body.wfl-cinematic .page-hero::after {
    left: 38%;
    right: -40%;
    top: 6%;
    height: 44%;
    opacity: .18;
  }
  body.wfl-cinematic .page-hero h1 { font-size: clamp(42px, 11vw, 62px); max-width: 100%; }
  body.wfl-cinematic .page-hero p { max-width: 100%; }
}

/* Better-matched art for heroes whose old image carried baked-in typography. */
body.wfl-page-start .page-hero { --cin-hero-image: url('/assets/lab/wfl-lab-plan-1440.webp'); }
body.wfl-page-thanks .page-hero,
body.wfl-page-privacy .page-hero,
body.wfl-page-terms .page-hero { --cin-hero-image: url('/assets/lab/wfl-lab-ship-1440.webp'); }
body.wfl-cinematic .article-hero::after {
  background: linear-gradient(90deg, #061326 0%, rgba(6, 19, 38, .82) 40%, rgba(6, 19, 38, .3)), url('/assets/lab/wfl-lab-experiment-1440.webp') center/cover;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
body.wfl-cinematic .products-hero::after {
  inset: 0 0 0 calc(var(--prime-gutter) + .58 * var(--prime-container));
  background: url('/assets/wfl-flagship-orbit-1440.webp') left center / auto 118% no-repeat;
  opacity: .9;
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 40% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 40% 50%, #000 55%, transparent 100%);
}
@media (max-width: 800px) {
  body.wfl-cinematic .products-hero::after { inset: 0 -30% 40% 35%; opacity: .25; }
}

/* --------------------------------------------------------------------------
   4. Homepage hero — always-legible headline and supporting copy.
   -------------------------------------------------------------------------- */
body.wfl-page-home .wfl-hero-refined .wfl-forge-hero-media::after {
  background:
    linear-gradient(90deg, rgba(4, 12, 27, .985) 0%, rgba(5, 15, 32, .97) 24%, rgba(6, 18, 38, .93) 36%, rgba(7, 21, 44, .78) 45%, rgba(7, 22, 46, .40) 55%, rgba(7, 22, 46, .08) 66%, transparent 78%),
    linear-gradient(180deg, rgba(3, 11, 25, .30) 0%, transparent 30%, transparent 70%, rgba(3, 11, 25, .55) 100%);
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-copy { max-width: 690px; }
body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title {
  font-weight: 460;
  font-variation-settings: normal;
  letter-spacing: -.036em;
  line-height: 1.02;
  text-shadow: 0 2px 3px rgba(1, 6, 16, .35), 0 10px 40px rgba(1, 6, 16, .6);
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title > em {
  font-weight: 420;
  padding-bottom: .06em;
  background: linear-gradient(100deg, #b9dcff 0%, #9cb8ff 36%, #c7b4ff 68%, #ffd993 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title i { font-style: normal; color: #8fa8ff; }
body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-lede { max-width: 36em; }

/* Secondary hero CTA: one clean glass disc + label, no stray arrow. */
body.wfl-page-home .wfl-hero-refined .wfl-hero-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(168, 196, 238, .22);
  background: rgba(8, 22, 44, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .3s, background .3s;
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-text-link:hover { border-color: rgba(245, 197, 111, .55); background: rgba(10, 28, 54, .75); }
body.wfl-page-home .wfl-hero-refined .wfl-play-orbit {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  border: 1px solid rgba(245, 197, 111, .5);
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), transparent 60%), linear-gradient(140deg, #18325c, #0b1a33);
  color: var(--prime-gold);
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-text-link > b { display: none; }
body.wfl-page-home .wfl-hero-refined .wfl-hero-text-link small { display: block; letter-spacing: .14em; }
body.wfl-page-home .wfl-hero-refined .wfl-hero-signature span { color: #dbe6f6; }

/* Proof strip: one continuous dark-glass instrument panel. */
body.wfl-page-home .wfl-hero-refined .wfl-hero-proof-output .wfl-hero-proof-item {
  background: linear-gradient(160deg, rgba(20, 40, 70, .9), rgba(9, 22, 41, .94));
  border-color: rgba(140, 170, 214, .16);
}
body.wfl-page-home .wfl-hero-refined .wfl-hero-proof-output .wfl-hero-proof-item strong { color: #fff; letter-spacing: -.02em; }
body.wfl-page-home .wfl-hero-refined .wfl-hero-proof-output .wfl-hero-proof-item span { color: #c9d7ea; letter-spacing: .1em; }
body.wfl-page-home .wfl-hero-refined .wfl-code-meter::after { color: rgba(186, 212, 252, .06); }
body.wfl-page-home .wfl-hero-refined .wfl-scroll-note { color: #aebdd3; font-size: 11px; letter-spacing: .22em; }

/* --------------------------------------------------------------------------
   5. Studio disciplines: the screenshot becomes a framed preview at the top
   of each card; copy lives on a solid surface below it. No more collisions.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .pinnacle-discipline img {
  inset: 0 0 auto 0;
  height: 62%;
  opacity: .9;
  object-position: left top;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
body.wfl-cinematic .pinnacle-discipline.violet img { object-position: 30% top; }
body.wfl-cinematic .pinnacle-discipline.gold img { object-position: 40% top; }
body.wfl-cinematic .pinnacle-discipline-overlay {
  background:
    linear-gradient(180deg, rgba(5, 14, 30, .38) 0%, rgba(5, 14, 30, .55) 22%, rgba(6, 16, 31, .93) 46%, #06101d 60%, #06101d 100%);
}
body.wfl-cinematic .pinnacle-discipline-body > strong { text-shadow: none; }
body.wfl-cinematic .pinnacle-discipline-top > span:last-child {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(4, 12, 26, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (max-width: 850px) {
  body.wfl-cinematic .pinnacle-discipline img { height: 100%; opacity: .42; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); object-position: left top; }
  body.wfl-cinematic .pinnacle-discipline-overlay { background: linear-gradient(90deg, #06101d 0%, rgba(6, 16, 29, .94) 45%, rgba(6, 16, 29, .7) 100%); }
}
@media (max-width: 600px) {
  body.wfl-cinematic .pinnacle-discipline,
  body.wfl-cinematic .pinnacle-discipline-body { min-height: 430px; }
  body.wfl-cinematic .pinnacle-discipline img { height: 52%; opacity: .85; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 100%); mask-image: linear-gradient(180deg, #000 35%, transparent 100%); }
  body.wfl-cinematic .pinnacle-discipline-overlay { background: linear-gradient(180deg, rgba(5, 14, 30, .35) 0%, rgba(6, 16, 31, .9) 40%, #06101d 55%); }
}

/* --------------------------------------------------------------------------
   6. Showreel + work tiles: the title zone is always a solid, calm surface.
   -------------------------------------------------------------------------- */
.cin-rail-card > img { filter: saturate(1.05) brightness(.92); }
.cin-rail-card-fade {
  inset: 0;
  background: linear-gradient(0deg, #031020 0%, #031020 30%, rgba(3, 16, 32, .9) 44%, rgba(3, 16, 32, .35) 66%, rgba(3, 16, 32, 0) 82%);
}
.cin-card-arrow { width: 38px; height: 38px; font-size: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: rgba(255, 255, 255, .45); }
.cin-card-footer strong { letter-spacing: -.03em; }
.cin-work-tile::after {
  background: linear-gradient(0deg, #041021 0%, #041021 26%, rgba(4, 16, 33, .9) 42%, rgba(4, 16, 33, .4) 66%, rgba(4, 16, 33, .05) 85%);
}
.cin-work-tile img { filter: saturate(1.05) brightness(.9); }
/* Smaller tiles: the screenshot sits above the caption instead of under it. */
.cin-work-tile:nth-child(n+3) img {
  height: 62%;
  bottom: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
.cin-work-tile:nth-child(n+3)::after { background: linear-gradient(0deg, #041021 0%, #041021 42%, rgba(4, 16, 33, .55) 62%, rgba(4, 16, 33, 0) 80%); }
.cin-work-tile:nth-child(3) img { object-position: 92% top; }
.cin-work-tile:nth-child(4) img { object-position: 88% top; }
.cin-work-tile:nth-child(5) img { object-position: 60% top; }
.cin-work-tile:nth-child(2) img { object-position: 85% top; }
.cin-work-lead img { object-position: 70% top; }
.cin-work-overlay strong { letter-spacing: -.035em; }
.cin-work-overlay b { display: inline-flex; align-items: center; gap: .4em; }
@media (max-width: 540px) {
  .cin-rail-card-fade { background: linear-gradient(0deg, #031020 0%, #031020 34%, rgba(3, 16, 32, .88) 50%, rgba(3, 16, 32, 0) 80%); }
}

/* --------------------------------------------------------------------------
   7. Headings that were sized for a wider column.
   -------------------------------------------------------------------------- */
.cin-showreel-intro h2, .cin-work-heading h2 { letter-spacing: -.036em; }
.cin-final-content h2 { letter-spacing: -.035em; line-height: .95; }

/* --------------------------------------------------------------------------
   8. Flagship page: align to the site grid, fix the sticky-heading collision.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .fl-page .process-intro { position: static; top: auto; }
body.wfl-cinematic .fl-page .process-intro h2 { max-width: none; }
body.wfl-cinematic .fl-page .process-intro h2 em { font-style: italic; }
body.wfl-cinematic .fl-page .process-intro .text-link { display: inline-flex; align-items: center; gap: .45em; }
body.wfl-cinematic .fl-page .fl-hero-copy { margin-left: var(--prime-gutter); max-width: min(640px, 50%); }
body.wfl-cinematic .fl-page .lead { max-width: 34em; }
body.wfl-cinematic .fl-page :is(.depth-section, .process-section) { padding-left: var(--prime-gutter); padding-right: var(--prime-gutter); }
body.wfl-cinematic .fl-page .collection-heading { padding-left: var(--prime-gutter); padding-right: var(--prime-gutter); }
body.wfl-cinematic .fl-page .card-track { padding-left: var(--prime-gutter); }
body.wfl-cinematic .fl-page .fl-hero-mist {
  background:
    linear-gradient(90deg, #040c18 0%, #040c18 30%, rgba(4, 12, 24, .9) 40%, rgba(4, 12, 24, .45) 50%, transparent 62%),
    linear-gradient(0deg, #040d1a 0%, transparent 18%);
}
body.wfl-cinematic .fl-page .promise-bolt { display: grid; place-items: center; color: #f3b83e; font-size: 44px; }
body.wfl-cinematic .fl-page .play-circle { display: inline-grid; place-items: center; }
body.wfl-cinematic .fl-page .play-circle .wfl-glyph { width: 14px; height: 14px; margin-left: 2px; }
body.wfl-cinematic .fl-page .arrow .wfl-glyph { width: 18px; height: 18px; }
body.wfl-cinematic .fl-page .project-card img { object-fit: cover; object-position: left top; }
@media (max-width: 1000px) {
  body.wfl-cinematic .fl-page .fl-hero-copy { margin-left: 5%; max-width: 78%; }
}
@media (max-width: 620px) {
  body.wfl-cinematic .fl-page .fl-hero-copy { margin: 0 21px; max-width: calc(100% - 42px); }
}

/* "It should look like nothing else." — keep the montage clear of the copy. */
.cin-final-vision::after {
  background:
    linear-gradient(90deg, #061321 0%, #061321 48%, rgba(6, 19, 33, .82) 58%, rgba(6, 19, 33, .35) 76%, rgba(6, 19, 33, .15) 100%),
    linear-gradient(0deg, #061321, transparent 35%);
}
.cin-final-stage { inset: 0 0 0 52%; filter: saturate(1.05) brightness(.78); }
.cin-final-stage img { object-position: 70% center; }
@media (max-width: 800px) { .cin-final-stage { inset: 0 0 0 30%; opacity: .3; } }

/* --------------------------------------------------------------------------
   9. Product pages.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .cin-product-hero .product-copy h1 { letter-spacing: -.038em; line-height: .98; font-size: clamp(3rem, 4.6vw, 5.4rem); max-width: 11em; }
body.wfl-cinematic .cin-product-hero .product-copy > p { max-width: 34em; }
body.wfl-cinematic .cin-product-hero::before {
  left: calc(var(--prime-gutter) + .6 * var(--prime-container));
  right: -6%;
  width: auto;
  filter: saturate(1.04) brightness(.86);
}
body.wfl-cinematic .cin-product-hero .product-hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(240px, .62fr); }
@media (max-width: 1050px) {
  body.wfl-cinematic .cin-product-hero::before { left: 52%; opacity: .55; }
  body.wfl-cinematic .cin-product-hero .product-hero-grid { grid-template-columns: 1fr 220px; }
}
@media (max-width: 800px) {
  body.wfl-cinematic .cin-product-hero::before { left: 30%; right: -40%; opacity: .25; }
  body.wfl-cinematic .cin-product-hero .product-hero-grid { grid-template-columns: 1fr; }
}
/* Capability lists: compact, scannable rows instead of tall, empty cards. */
body.wfl-cinematic .product-page .product-points article {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
}
body.wfl-cinematic .product-page .product-points span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--product-accent) 10%, white);
  font-size: .78rem;
  letter-spacing: .04em;
}
body.wfl-cinematic .product-page .product-points strong { margin-top: 0; font-size: 1.06rem; line-height: 1.35; letter-spacing: -.01em; }
body.wfl-cinematic .cin-product-hero .product-status { font-size: 12px; letter-spacing: .12em; }
body.wfl-cinematic .product-row > b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(241, 200, 122, .35); font-size: 18px; transition: background .3s, transform .3s var(--prime-ease); }
body.wfl-cinematic .product-row:hover > b { background: rgba(241, 200, 122, .12); }

/* --------------------------------------------------------------------------
   9b. Quiet copy on dark sections was too quiet.
   -------------------------------------------------------------------------- */
body.wfl-cinematic .inner-dark .simple-copy p,
body.wfl-cinematic .final-cta p { color: #c9d6e8; }

/* --------------------------------------------------------------------------
   10. Focus, selection and motion hygiene.
   -------------------------------------------------------------------------- */
body.wfl-cinematic ::selection { background: rgba(91, 140, 255, .28); }
body.wfl-cinematic .skip-link:focus { z-index: 10000; }

/* Phone: keep each line of the hero statement intact. */
@media (max-width: 520px) {
  body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title { font-size: clamp(30px, 8.6vw, 44px); letter-spacing: -.034em; }
  body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title > span,
  body.wfl-page-home .wfl-hero-refined .wfl-hero-refined-title > em { white-space: nowrap; }
}

/* Showreel controls: mouse users can page through the collection too. */
.cin-reel-controls { display: flex; align-items: center; gap: 10px; }
.cin-reel-controls > span { font-size: 12px; letter-spacing: .14em; color: #c5d8ee; font-weight: 800; margin-left: 6px; }
.cin-reel-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(160, 186, 226, .32);
  background: rgba(8, 22, 44, .6);
  color: #eef4fd;
  font-size: 18px;
  cursor: pointer;
  transition: border-color .25s, background .25s, color .25s;
}
.cin-reel-btn:hover { border-color: var(--prime-gold); color: var(--prime-gold); background: rgba(12, 30, 58, .85); }
.cin-reel-btn:focus-visible { outline: 3px solid var(--prime-gold); outline-offset: 3px; }

/* Forms keep light native controls even when the OS is in dark mode. */
body.wfl-cinematic .project-form,
body.wfl-cinematic .navigator-ui { color-scheme: light; }