/* Charcoal edition. Photography and original brand artwork retain their colors. */
:root{color-scheme:dark;--ink:#f3f3f1;--muted:#c0c1c3;--line:#48494c;--paper:#292a2c;--orange:#ff7945}
::selection{background:#f25c28;color:#fff}
.hero{background:#36383a}
.hero-wash{background:linear-gradient(180deg,rgba(43,45,48,.94) 0%,rgba(43,45,48,.9) 18%,rgba(43,45,48,.82) 42%,rgba(32,34,37,.42) 72%,rgba(23,25,27,.55) 100%)}
.site-header .brand{padding:6px;border-radius:10px;background:#e7e7e4;isolation:isolate}
.site-header nav{background:#45474b80;border-color:#ffffff25;box-shadow:0 8px 28px #0000000d}
.nav-cta,.mobile-contact,.button-dark{background:#eeeeeb;color:#242527}
.nav-cta:hover,.mobile-contact:hover,.button-dark:hover{background:#fff}
.hero-chip{background:#60626640;border-color:#ffffff29;color:#e1e2e2}
.hero-description{color:#e0e1e2}
.hero-caption{color:#c9cbce}
.button-glass{background:#575a5d70;border-color:#ffffff35;color:#f3f3f1}
.button-glass:hover{background:#686b6e90}
.stat-bar{background:#44474acc;border-color:#ffffff35;box-shadow:0 12px 45px #00000024}
.stat-bar li>span{color:#e4e5e5}
.experience-label{background:#292b2dd9;color:#f2f2f0}
.stat-context{color:#ededeb;text-shadow:0 1px 4px #000}
h2>span{color:#adafb3}
.section-intro,.showcase-copy>p:not(.eyebrow){color:#c3c5c7}
.brand-tabs{border-color:var(--line)}
.brand-tab.logo-tab{background:#dcdeda;border:1px solid #dcdeda;isolation:isolate}
.brand-tab.logo-tab:hover{background:#eef0ec;border-color:#eef0ec}
.brand-tab.logo-tab[aria-selected=true]{background:#f3f3ef;border-color:#ff7945;box-shadow:inset 0 -3px #f25c28}
.brand-panel{background:#36383b}
.showcase-copy .eyebrow{color:#b8bbc0}
.showcase-copy .text-button{border-color:#75787d;color:#f3f3f1}
.showcase-media{background:#1e2022}
.jacob-logo-art{background:#dcded9}
.slider-controls button{border-color:#64666b}
.slider-controls button:hover{background:#44464a}
.slide-count,.mobile-brand-hint,.mobile-brand-hint>span{color:#bcbfc2}
.result-card{background:#343639;border-color:#4b4d51}
.result-brand{color:#c3c5c8}
.result-main>span,.result-period{color:#c3c5c8}
.results-context{color:#b8bbc0}
.steps article{border-color:#55575b}
.step-tag{color:#b9bcc0}
.about{background:#36383b}
.about-mark{background:transparent;border-radius:0;isolation:isolate}
.about-mark img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.about-label p{color:#bfc1c5}
.about-copy>p:not(.eyebrow),.about-copy>p.experience-copy{color:#c5c7ca}
.contact-details{color:#ededeb}
footer{color:#bfc1c5}
footer>span:first-child{display:block;padding:9px 12px;border-radius:10px;background:#e7e7e4;isolation:isolate}
.skip{background:#ededeb;color:#222}
.menu-toggle{background:#55585c99;border-color:#ffffff30}
.menu-toggle span{background:#f4f4f2}
/* Transparent PNGs extracted from the original artwork. */
.site-header .brand,footer>span:first-child{background:transparent;padding:0;border-radius:0}
.dark-lockup{display:block;position:relative;overflow:hidden;flex-shrink:0}
.dark-lockup img{position:static;display:block;width:100%;max-width:100%;height:auto;mix-blend-mode:normal}
.dark-lockup-centered{width:144px}
.dark-lockup-horizontal{width:180px}
@media(max-width:700px){
  .dark-lockup-centered{width:116px}
  .dark-lockup-horizontal{width:135px}
  .site-header nav{background:#383a3df7;border-color:#64666b;box-shadow:0 16px 40px #00000040}
  .site-header.menu-open nav>a:hover{background:#4b4d51}
  .stat-bar{background:#44474ae6}
  .brand-tabs{scrollbar-color:#75787c transparent}
}
@media(max-width:359px){.dark-lockup-centered{width:101px}.dark-lockup-horizontal{width:120px}}

@media(max-width:700px){.about-mark{width:90px;height:90px;flex-shrink:0}}

/* Horizontal white-and-orange header logo. */
.site-header .header-lockup{width:176px}
@media(max-width:700px){.site-header .header-lockup{width:128px}}
@media(max-width:359px){.site-header .header-lockup{width:104px}}

/* Five clear steps from discovery through paid social. */
.approach .section-heading{align-items:flex-end;gap:35px}
.approach .section-heading h2{font-size:clamp(35px,3.45vw,50px)}
.approach .section-intro{max-width:310px;flex-shrink:0}
.process-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;list-style:none;padding:0;margin:0}
.process-card{grid-column:span 2;min-width:0;border:1px solid #4b4d51;border-radius:22px;background:#343639;padding:30px;display:flex;flex-direction:column;align-items:flex-start}
.process-card:nth-child(n+4){grid-column:span 3}
.process-number{display:grid;place-items:center;width:39px;height:39px;border:1px solid #ff79454d;border-radius:50%;color:var(--orange);font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:27px}
.process-card h3{font-size:25px;line-height:1.2;letter-spacing:-.7px;font-weight:500;margin:0 0 14px}
.process-card p{font-size:14px;line-height:1.7;color:#c3c5c8;margin:0;max-width:510px}
.process-scale{border-color:#ff794578;background:linear-gradient(120deg,#ff794508,#ff794500),#343639}
.process-scale .process-number{background:var(--orange);color:#242527;border-color:var(--orange)}
.process-cta{display:flex;justify-content:center;margin-top:32px}
.process-cta .button{background:var(--orange);color:#242527;min-height:50px;font-weight:600}
.process-cta .button:hover{background:#ff9166}
@media(max-width:1100px){
  .approach .section-heading{align-items:flex-start;flex-direction:column;gap:23px}
  .approach .section-intro{max-width:600px}
  .process-card{padding:25px}
  .process-card h3{font-size:23px}
}
@media(max-width:700px){
  .approach .section-heading h2{font-size:36px;line-height:1.12;letter-spacing:-1.6px}
  .process-cards{grid-template-columns:1fr;gap:12px}
  .process-card,.process-card:nth-child(n+4){grid-column:auto;padding:25px;border-radius:20px}
  .process-number{margin-bottom:20px;width:36px;height:36px}
  .process-card h3{font-size:24px}
  .process-card p{font-size:15px;line-height:1.65}
  .process-cta{margin-top:24px}
  .process-cta .button{width:100%;font-size:13px;padding:16px;gap:20px}
}
@media(max-width:359px){.approach .section-heading h2{font-size:33px}}

/* Muted background film, with a poster beneath it for autoplay restrictions. */
.hero-poster,.hero-film{object-position:50% 50%}
.motion-toggle{position:static;display:inline-flex;min-height:44px;padding:10px 14px;margin-top:4px;font-size:11px;gap:8px;background:#25272999;border:1px solid #ffffff30;color:#f3f3f1}
.motion-toggle[hidden]{display:none}
.motion-toggle .ui-icon{width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.hero-film{transition:none}}

/* A discreet email alternative to the inquiry form. */
.footer-contact{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.footer-contact>a{font-size:12px;min-height:44px;display:flex;align-items:center}
.footer-contact>a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-contact>span{font-size:10px;color:#aeb0b4}
@media(max-width:700px){
 footer.section{display:grid;grid-template-columns:1fr auto;gap:12px 20px}
 footer.section>span:first-child{grid-column:1;grid-row:1}
 footer.section>a{grid-column:2;grid-row:1;justify-self:end}
 .footer-contact{grid-column:1/-1;grid-row:2;align-items:flex-start;text-align:left;gap:0}
 .footer-contact>span{display:none}
}

/* Six brands, with website films framed in their original widescreen format. */
@media(min-width:1001px){.brand-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1000px){.brand-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.brand-tab.logo-classic{background:#080808;border-color:#313337}
.brand-tab.logo-classic:hover,.brand-tab.logo-classic[aria-selected=true]{background:#111;border-color:var(--orange)}
.logo-classic .logo-window{width:160px;height:100px}
.logo-classic .logo-window img{width:300px;height:auto;max-width:none;object-fit:contain;mix-blend-mode:normal}
.showcase-media.website-film{height:auto;aspect-ratio:16/9;align-self:center}
.showcase-media.website-film img{width:100%;height:100%;object-fit:contain}
.film-preview-label{position:absolute;left:18px;top:18px;padding:8px 12px;border-radius:20px;background:#17191bcc;border:1px solid #ffffff30;color:white;font-size:9px;letter-spacing:.5px}
.original-post{display:inline-flex;align-items:center;gap:12px;font-size:11px;color:#c3c5c7;margin-top:24px;min-height:44px}
.original-post:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.logo-classic .logo-window{width:100%;height:80px}.logo-classic .logo-window img{width:190px}.film-preview-label{font-size:8px;left:12px;top:12px;padding:7px 9px}}

/* Jump Lab: process preview and complete film. */
@media(min-width:1200px){.brand-tabs{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:701px) and (max-width:1199px){.brand-tabs{position:relative;display:flex;overflow-x:auto;gap:8px;scrollbar-width:thin}.brand-tab.logo-tab{flex:0 0 180px}}
.brand-tab.logo-jump{background:#0d0f1b;border-color:#313337}
.brand-tab.logo-jump:hover,.brand-tab.logo-jump[aria-selected=true]{background:#0d0f1b;border-color:var(--orange)}
.logo-jump .logo-window{width:110px;height:104px}
.logo-jump .logo-window img{width:110px;height:110px;object-fit:contain}
.project-film-actions{display:flex;flex-wrap:wrap;gap:16px 28px}
.project-film-actions .text-button{min-height:44px}
.project-film-actions .secondary-film{color:#c3c5c7}
@media(max-width:700px){.logo-jump .logo-window{width:80px;height:80px}.logo-jump .logo-window img{width:80px;height:80px}}

/* Roku cover uses the supplied wordmark instead of a video still. */
.showcase-media.roku-brand-cover{background:#fff}
.roku-cover-window{display:flex;align-items:center;justify-content:center;width:78%;aspect-ratio:6.4;overflow:hidden}
.showcase-media.roku-brand-cover .roku-cover-window img{width:116%;height:auto;max-width:none;flex-shrink:0}

.brand-tab.logo-jump{background:#080808}
.brand-tab.logo-jump:hover,.brand-tab.logo-jump[aria-selected=true]{background:#111}
.logo-jump .logo-window img{filter:grayscale(1) contrast(2);mix-blend-mode:screen}