/* Way to Work brand identity (Integrated Film W / v3), applied over the original Webflow stylesheet.
   Palette and type from brand/brand.css + the brand guide: Carbon, Warm White, Slate, Ember, Signal Orange (<=5%),
   Manrope 800 / 600 / 400. Loaded after the Webflow CSS and brand-type.css. */
@font-face { font-family: Manrope; src: url("Manrope-Variable.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --w2w-carbon: #171B22;
  --w2w-carbon-2: #20252D; /* carbon tint for cards on carbon */
  --w2w-warm-white: #F5F3EE;
  --w2w-ember: #B84326;
  --w2w-signal-orange: #C8AD7F; /* accent: Brad 2026-10-22 changed #FF6B3D -> #C8AD7F (token name kept) */
  --w2w-slate: #626874;
  --w2w-font: "Manrope", Arial, sans-serif;

  /* the Webflow theme variables, remapped */
  --primary: var(--w2w-signal-orange);
  --primary-dark: var(--w2w-carbon);
  --primary-light: #FFE3D9;
  --blue-gray-dark: var(--w2w-carbon);
  --blue-gray: var(--w2w-carbon-2);
  --light-gray: var(--w2w-warm-white);
  --gray: #E8E5DE;
  --white: var(--w2w-warm-white);
}

body { font-family: var(--w2w-font); font-weight: 400; background-color: var(--w2w-warm-white); }
p, li { line-height: 1.6; }
h3, h4, h5, h6, .nav-link, .dropdown-nav-link, .arrow-button, .primary-button, .eir-package-button { font-family: var(--w2w-font); font-weight: 600; }
h1, .banner-home-title, .banner-title { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.08; letter-spacing: -.02em; }
h2, .heading-2, .heading-3 { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
/* headlines are ExtraBold everywhere: some Webflow classes force weight 400 on h1/h2 */
h1, h2, h1 *, h2 * { font-weight: 800 !important; }
.services-home-title { font-size: clamp(26px, 2.8vw, 34px); }

/* Signal Orange buttons always carry Carbon text (never white on orange) */
.primary-button, .eir-package-button.signature, .button-arrow-element-solo { background-color: var(--w2w-signal-orange); border-color: var(--w2w-signal-orange); color: var(--w2w-carbon); }
.primary-button:hover, .eir-package-button.signature:hover { background-color: var(--w2w-warm-white); border-color: var(--w2w-warm-white); color: var(--w2w-carbon); }
.primary-button.black-button, .eir-package-button.black-button, .eir-package-button.elite { background-color: var(--w2w-carbon); border-color: var(--w2w-carbon); color: var(--w2w-warm-white); }
/* inside the (now Carbon) panels a black button would vanish: use the orange primary there */
:is(.cta-banner, .eir-section-on-home, .eir-content-bottom, .section.blue-bg, .eir-package-title-area.signature) :is(.primary-button.black-button, .black-button) { background-color: var(--w2w-signal-orange); border-color: var(--w2w-signal-orange); color: var(--w2w-carbon); }

/* accents: orange stays small (rules, bullets, active states); text links are warm white */
.footer-link, .info-company, .contact-us-link-white { color: var(--w2w-warm-white); }
.footer-link:hover, .info-company:hover, .contact-us-link-white:hover, .nav-link.white-style:hover { color: var(--w2w-signal-orange); }
.text-color-blue { color: var(--w2w-warm-white); }            /* headings that carried the cyan class themselves */
:is(h1, h2, h3, h4, h5, h6, p) .text-color-blue { color: inherit; } /* accent words inside a headline take its color */
.services-home-title { color: var(--w2w-warm-white); }
.services-home-title:hover { color: var(--w2w-signal-orange); }

/* former cyan panels -> Carbon panels with warm-white text (keeps orange under 5% of the surface) */
.cta-banner, .cta-banner-text-area, .eir-section-on-home, .eir-content-bottom, .service-block-top, .section-with-blue-bg,
.eir-package-title-area.signature, .icon-blue-bg { background-color: var(--w2w-carbon); background-image: none; color: var(--w2w-warm-white); }
.cta-banner :is(h1, h2, h3, h4, h5, h6, p, div, li, span),
.eir-section-on-home :is(h1, h2, h3, h4, h5, h6, p, div, li, span, strong),
.eir-package-title-area.signature :is(p, h6, div, .pricing-plan-price, .pricing-plan-price.black),
.section-with-blue-bg :is(h1, h2, h3, h4, h5, h6, p, div, li, span) { color: var(--w2w-warm-white); }
/* About's statement band: a Warm White band between the Carbon sections */
.section.blue-bg { background-color: var(--w2w-warm-white); }
.section.blue-bg :is(h1, h2, h3, h4, h5, h6, p, div, li, span) { color: var(--w2w-carbon); }
.cta-banner .cta-list-number { color: var(--w2w-signal-orange); }
.eir-package-title-area.elite { background-image: linear-gradient(347deg, var(--w2w-carbon-2), var(--w2w-carbon) 64%); }
.eir-package-title-area.elite :is(p, h6, div, .pricing-plan-price, .pricing-plan-price.black) { color: var(--w2w-warm-white); }
.team-primary-overlay { background-color: rgba(23, 27, 34, .85); }

/* the CTA's arrow circle was black-on-cyan; on Carbon it becomes an outline */
.cta-banner .button-arrow-element.black-circle { background-color: transparent; border-color: var(--w2w-warm-white); }

/* decorative cyan artwork -> neutral (wave lines, footer pattern) and the quote marks -> warm white */
img[class*="bg-element"] { filter: grayscale(1); opacity: .45; }
.quote-icon-testimonial, .footer-social-icon img { filter: grayscale(1) brightness(2.4); }
.package-feature-item-check, .why-eir-list-check-icon { filter: brightness(0); opacity: .85; }
.eir-intro-video { box-shadow: 5px 5px 80px rgba(98, 104, 116, .55); }
.landing-inner-page-image.banner { box-shadow: 0 6px 20px rgba(23, 27, 34, .12); }
.footer { background-image: url("slate-674099ba198352e6159a123e_BG-Footer_Two.svg"), url("slate-674099ba198352e6159a123d_BG-Footer-One.svg"); }
blockquote { background-image: url("slate-674099ba198352e6159a1256_quote.svg"); }

/* the cyan hero glow becomes a quiet slate one */
.pages-banner-overlay { background-image: linear-gradient(16deg, rgba(98, 104, 116, .55), rgba(23, 27, 34, 0) 42%); background-color: rgba(23, 27, 34, .5); }
.banner-three-overlay, .banner-services-details-overlay { background-image: linear-gradient(173deg, transparent 60%, rgba(98, 104, 116, .3)); }
.section.cta-with-image-background { background-image: linear-gradient(24deg, rgba(23, 27, 34, .75) 26%, rgba(23, 27, 34, .2) 67%); }

/* light sections: Warm White with Carbon text; Ember for small accent text on light */
.bg-white, .section.bg-white { background-color: var(--w2w-warm-white); }
.process-step, .eir-package-title-area { background-color: var(--w2w-warm-white); }
.bg-white :is(.text-color-blue, .eyebrow, .signature-service-eyebrow), .eir-package-title-area .text-color-blue { color: var(--w2w-ember); }
.eir-package-title-area:is(.signature, .elite) .text-color-blue { color: var(--w2w-signal-orange); } /* dark cards */

/* logo: horizontal lockup upper-left, at least 240px wide (guide p.18) */
.logo { height: 60px; width: auto; min-width: 240px; }
@media screen and (max-width: 991px) { .logo { height: 52px; } }
.footer-logo { height: 60px; width: auto; min-width: 240px; }

/* the one film-perforation cue per page: a short perforated rule above the footer content */
.footer-container::before { content: ""; display: block; width: 120px; height: 12px; margin-bottom: 32px;
  background: var(--w2w-signal-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12'%3E%3Crect x='6' y='3' width='6' height='6' fill='%23171B22'/%3E%3C/svg%3E") repeat-x 0 0; }

/* keyboard focus stays visible (guide p.23) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--w2w-signal-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* header readability (Brad 2026-10-22): a dark see-through bar behind the white nav, kept while sticky.
   !important beats the inline background Webflow's interaction script writes on .navbar-fixed. */
.navbar-fixed { background-color: rgba(23, 27, 34, .78) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(245, 243, 238, .06); }