/* Hero kicker line back to light grey (2026-10-17 fine-tune). */
.kicker,.kicker *{color:#e3e3e3!important}
/* Headings: Neue Haas Grotesk Display Pro 65 Medium (Adobe serves it as 600). */
.hero-title,.phero-title,.statement-heading,.copy-heading,.copy-heading-ghost,.outcome-title,.v2-section-title,.title-link,.wi-big-head,.wi-point-title,.wi-step,.of-title,.tile-title,.pr-name,.pr-promo-title,.pp-main-name,.pp-name,.pp-price,.pp-q,.ct-side-title,.pt-title,.ab-quote-text,.ab-fact-num,.ab-belief-text,.ab-person-name,.phero-hook h2,.pstory-desc h2,.pstory-services p,h1 .w span,h2 .w span,h3 .w span,.kicker .w span,.statement-sub .w span,.ab-quote-text .w span,.ab-belief-text .w span{font-weight:600}
/* Body copy: regular weight everywhere (2026-10-17). */
.intro,.intro *,.copy-p,.copy-p *,.copy-body p,.wi-point-text,.wi-process-p,.of-lede,.of-format,.of-item,.of-note,.pp-item,.pp-a,.pp-line,.pp-fit,.pp-wl-lede,.pr-line,.pr-promo-p,.card-desc,.tile-desc,.ab-fact-text,.ab-quote-sub,.ab-person-bio,.ct-dd,.pt-body p,.pt-body li,.pstory-desc p,.phero-summary,.v2-section-sub{font-weight:400!important}
/* Partner tiles (Brand Partnerships). */
.bp-tile-jb{background:#13132b url("https://cdn.prod.website-files.com/6ab98abcf7f7a77e998e9d29/6ab98abcf7f7a77e998ea052_Johnbrooks_logo.png") 50% 50%/62% auto no-repeat}
.bp-tile-gl{background:#fff url("https://cdn.prod.website-files.com/6ab98abcf7f7a77e998e9d29/6ab98abcf7f7a77e998ea051_GL_Logo.png") 50% 50%/62% auto no-repeat}
/* Coral #FF4040 (2026-10-17): the light grey heading text and every CTA. */
:root{--coral:#FF4040}
.statement-sub,.statement-sub *,.copy-heading-ghost,.copy-heading-ghost *,.sectors-head,.sectors-head *{color:var(--coral)!important}
a.pill-solid,a.pill-white,a.of-btn-light,a.pr-promo-btn,a.pp-btn,.ct-send,input.ct-send{background-color:var(--coral)!important;color:#fff!important;border-color:var(--coral)!important}
a.pill-line{border-color:var(--coral)!important;color:var(--coral)!important}
a.pill-solid:hover,a.pill-white:hover,a.of-btn-light:hover,a.pr-promo-btn:hover,a.pp-btn:hover,.ct-send:hover{background-color:#000!important;border-color:#000!important;color:#fff!important}
a.pill-line:hover{background-color:var(--coral)!important;color:#fff!important}
a.pill-solid *,a.pill-white *,a.of-btn-light *,a.pr-promo-btn *,a.pp-btn *{color:inherit!important}
a.pill-line *{color:inherit!important}
/* Page heading photos (2026-10-17): image set per page by the site footer script. */
.ph-img{margin-top:clamp(24px,3vw,48px);aspect-ratio:21/9;overflow:hidden;background:#eee center/cover no-repeat}
.ph-img-el{display:none}
@media (max-width:767px){.ph-img{aspect-ratio:4/3}}
/* Promo banners (Content Days, Seminars) in the Brand Partnerships style (2026-10-17). */
.pr-promo:not(.pr-promo-quiet){background:#000!important;color:#fff}
.pr-promo:not(.pr-promo-quiet) .pr-promo-inner{background:#000!important;border-color:#000!important;color:#fff}
.pr-promo:not(.pr-promo-quiet) .pr-promo-title{color:var(--coral)!important}
.pr-promo:not(.pr-promo-quiet) .pr-promo-p,.pr-promo:not(.pr-promo-quiet) .pr-promo-price-note{color:#d9d9d9!important}
.pr-promo:not(.pr-promo-quiet) .pr-promo-price,.pr-promo:not(.pr-promo-quiet) .pr-promo-tag{color:#fff!important}
/* Mobile pass (2026-10-17). */
.nm-extra,.nm-util{display:none!important}
@media (max-width:991px){
  /* New mobile menu: full-screen black panel. */
  body.nm-open{overflow:hidden}
  body.nm-open .main-nav{background:#0d0d0d}
  body.nm-open .nav-logo{color:#fff}
  body.nm-open .menu-btn{background:transparent!important;color:#fff!important;border-color:#fff!important}
  .nav-links.open{position:fixed!important;top:var(--nm-top,96px)!important;left:0;right:0;bottom:0;background:#0d0d0d!important;border:0!important;padding:4px 24px 40px!important;row-gap:0!important;align-items:stretch!important;overflow-y:auto;z-index:50!important}
  .nav-links.open .v2-nav-link{display:flex;justify-content:space-between;align-items:center;color:#fff;font-family:"neue-haas-grotesk-display","Inter Tight",sans-serif;font-weight:600;font-size:32px;letter-spacing:-.035em;line-height:1.05;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.14);text-decoration:none}
  .nav-links.open .v2-nav-link::after{content:"\2197";font-family:"Inter Tight",sans-serif;font-weight:400;font-size:22px;color:var(--coral)}
  .nav-links.open .v2-nav-link.w--current{color:var(--coral)}
  .nav-links.open .nav-social{order:20;margin:28px 0 0!important;gap:10px}
  .nav-links.open .social-link{filter:invert(1)}
  .nav-links.open .nm-extra{display:flex!important;flex-direction:column;gap:22px;order:10;padding-top:26px}
  .nm-util{display:flex;flex-wrap:wrap;gap:8px 22px}
  .nm-util a{color:rgba(255,255,255,.62);font-size:16px;text-decoration:none}
  .nm-util a:hover{color:#fff}
  .nm-cta{align-self:flex-start;background:var(--coral);color:#fff;border-radius:999px;padding:14px 24px;font-size:17px;font-weight:500;text-decoration:none}
}
@media (max-width:767px){
  /* Wider side margins (was 16px). */
  .micro-nav,.main-nav,.hero-section,.statement,.gap-section,.nerve,.services-section,.section-head,.tv-nav,.work-section,.closing,.insta,.wi-myths,.wi-dark,.ab-facts,.ab-team,.ab-cta,.pr-prods,.pr-promo,.of-wrap,.ct-section,.pp-faq,.phero,.shots-section,.pstory,.v2-video-section,.pt-post,.site-footer{padding-left:24px!important;padding-right:24px!important}
  /* Timeline centred. */
  .wi-steps{align-items:center!important;text-align:center}
  .wi-steps>*{margin-left:auto;margin-right:auto}
  /* Room for the hand-drawn circle above "work". */
  .work-title{padding-top:.45em}
  .annot-host{overflow:visible}
}
/* Offer card prices (2026-10-17). */
.of-price{font-family:"neue-haas-grotesk-display","Inter Tight","Helvetica Neue",Arial,sans-serif!important;font-weight:600!important;font-size:clamp(20px,1.6vw,26px)!important;line-height:1.15!important;letter-spacing:-.01em}
.of-price-note{font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif!important}
.of-card-dark .of-price{color:#fff!important}
.of-card-dark .of-price-note{color:#bdbdbd!important}
/* Client logo carousel */
.client-logos .logos-set{align-items:center}.client-logos .logo-img{width:auto;max-width:none;display:block;flex:none;margin:0 clamp(22px,2.6vw,44px);opacity:.9}.client-logos .logos-track{animation-duration:90s!important;gap:0!important;column-gap:0!important}.client-logos .logos-set{gap:0!important;column-gap:0!important;padding:0!important}@media (max-width:767px){.client-logos .logo-img{transform:scale(.8)}}
/* Fine-tune pass (2026-10-17). */
.tv-blockquote,.tv-blockquote *{font-family:"neue-haas-grotesk-display","Inter Tight",sans-serif!important;font-weight:600!important}
.work-section{overflow:visible}.work-title{padding-top:.45em}
.tile-icon,.tile-icon .w-embed,.tile-svg{overflow:visible}
.i-draw{stroke-dasharray:150;stroke-dashoffset:150;animation:ntDraw 3.4s ease-in-out infinite}
@keyframes ntDraw{0%{stroke-dashoffset:150}55%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-150}}
.i-pencil{animation:ntBob 3.4s ease-in-out infinite}
@keyframes ntBob{0%,100%{transform:translate(0,0)}50%{transform:translate(-8px,5px)}}
.i-grow{transform-box:fill-box;transform-origin:50% 100%;animation:ntGrow 2.8s ease-in-out infinite}
.nt-d2{animation-delay:.25s}.nt-d3{animation-delay:.5s}
@keyframes ntGrow{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.i-draw,.i-pencil,.i-grow{animation:none;stroke-dashoffset:0}}
.nt-more{display:flex;justify-content:center;margin-top:clamp(36px,4vw,64px)}
.closing-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.nt-all{flex:none;margin-bottom:.4em}
.tv90{width:90%!important;margin:clamp(70px,8vw,140px) auto!important;max-width:none}
.yt-play{position:absolute;right:clamp(20px,3vw,48px);top:clamp(20px,3vw,48px);left:auto;transform:none;z-index:5;display:flex;align-items:center;gap:10px;background:var(--coral,#FF4040);color:#fff;border:0;border-radius:999px;padding:14px 22px 14px 18px;font:500 17px "Inter Tight",sans-serif;cursor:pointer;transition:background-color .2s}
.yt-play span{width:0;height:0;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.yt-play:hover{background:#000}
.yt-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:24px}
.yt-box{width:min(1200px,100%);aspect-ratio:16/9;background:#000}
.yt-box iframe{width:100%;height:100%;border:0;display:block}
.yt-close{position:absolute;top:18px;right:18px;background:#fff;color:#000;border:0;border-radius:999px;padding:10px 18px;font:500 15px "Inter Tight",sans-serif;cursor:pointer}
.ph-img{position:relative}
.ph-img video{width:100%;height:100%;object-fit:cover;display:block}
.ph-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.8s ease}
.ph-slide.on{opacity:1}
html[data-path="/workshops"] .of-grid .of-card:nth-child(2){background:#f2f2f2!important;border-color:#f2f2f2!important}
html[data-path="/workshops"] .wi-myths .wi-big-head{margin-bottom:clamp(48px,5vw,90px)!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(2){background:#f2f2f2!important;border-color:#f2f2f2!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(2) :not(a):not(.of-tag){color:#000!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(2) .of-item{border-color:rgba(0,0,0,.14)!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(3){background:#000!important;border-color:#000!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(3) :not(a):not(.of-tag){color:#fff!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(3) .of-price-note{color:#bdbdbd!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(3) .of-item{border-color:rgba(255,255,255,.2)!important}
html[data-path="/brand-id"] .of-grid .of-card:nth-child(3) .of-list{border-color:#fff!important}
.bp-grid{margin-top:clamp(40px,4.5vw,80px)!important}.bp-name{display:none!important}
html[data-path="/products"] .pr-promo-quiet{margin-top:clamp(60px,7vw,120px)!important}
.ct-side{background:#000!important;color:#fff;padding:clamp(28px,3vw,44px)!important;border-top:0!important}
.ct-side .ct-side-title,.ct-side .ct-dd,.ct-side .ct-dd-link,.ct-side a{color:#fff!important}
.ct-side .ct-dt{color:#9a9a9a!important}
.ct-side .ct-detail{border-bottom-color:rgba(255,255,255,.18)!important}
.ct-side a:hover{color:var(--coral,#FF4040)!important}

/* Where it fits block (2026-10-18): the process-step circle draws outside its 24px row; case studies sit on the black under the process map. */
.annot-host>svg{overflow:visible}
.wi-dark .tv-on-dark{margin:clamp(56px,6vw,110px) auto 0!important}
.wi-dark .tv-on-dark .v2-section-title,.wi-dark .tv-on-dark .v2-section-title *{color:#ececec!important}
.wi-dark .tv-on-dark .section-sub{color:#bdbdbd!important}
/* One red (2026-10-18): every use of the older brand red #cc3333 now matches the coral #FF4040.
   Sources: Webflow class styles, nim-v2-home-v2.css (hovers, hand-drawn annotations), project pager, product page code. */
.nav-logo:hover,.v2-nav-link:hover,.outcome:hover,.tile:hover,.title-link:hover,.insta-handle:hover,.v2-footer-link:hover,.ct-dd-link:hover,
.pstory-label,.pager-label,.ct-msg-err,.wi-step.wi-step-here,.ab-fact-num,.ab-belief-tag,.ab-person-role,.pr-price,.pr-promo-tag-red,.of-tag,.pt-crumb-link,.pp-step,.pp-status,
.tile:hover .tile-icon,.work-card:hover .work-name,.work-card:hover .article-name,.work-card:hover .card-arrow,.pager-link:hover .pager-name,
.annot-note,.pr-card-link:hover .pr-title,.pr-inline,.art-meta,.pp-also-card:hover .pr-title{color:var(--coral)!important}
.micro-nav,.social-link:hover,.pr-ph-red,.pp-main-red,.pp-item::before{background-color:var(--coral)!important}
.tile:hover,.social-link:hover,.pp-status{border-color:var(--coral)!important}
.ct-input:focus,.pp-wl .ct-input:focus{border-bottom-color:var(--coral)!important}
.pp-wl .ct-send:hover{background-color:var(--coral)!important;color:#fff!important}
.annot-layer path{stroke:var(--coral)!important}

/* About team photo (2026-10-18) */
.ab-team-photo{display:block;width:auto;max-width:none;box-sizing:border-box;margin:clamp(60px,7vw,130px) 0 clamp(10px,2vw,30px);padding:0 2vw}
@media (max-width:767px){.ab-team-photo{padding:0 24px}}
.ab-team-photo img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 40%}
@media (max-width:767px){.ab-team-photo img{aspect-ratio:4/3;object-position:45% 40%}}

/* Paul's review (2026-10-19): sticky slim header, full footer, closing CTA */
.nh-spacer{display:none}
.site-header.nh-fixed{position:fixed!important;top:0;left:0;right:0;z-index:60;background:var(--nh-bg,#fff);box-shadow:0 1px 0 var(--nh-line,rgba(0,0,0,.08));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.site-header.nh-fixed .micro-nav{display:none!important}
.site-header.nh-fixed .main-nav{padding-top:14px!important;padding-bottom:14px!important}
.site-header.nh-fixed.nh-hide{transform:translateY(-110%)}
body.nh-on .nh-spacer{display:block}
.nc-who{display:inline-block;margin-top:22px;font-size:15px;text-decoration:none;color:inherit;opacity:.75;border-bottom:1px solid currentColor;padding-bottom:2px}
.nc-who:hover{opacity:1;color:var(--coral)}
.nc-dark,.nc-dark .wi-big-head,.nc-dark .ab-cta-intro{color:#ececec}
.site-footer.nf{display:block!important;font-size:15px;line-height:1.5;background:transparent!important;color:#111!important}
.site-footer.nf.nf-dark{color:#ececec!important}
.nf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:56px 0 48px}
.nf-logo{font-family:"neue-haas-grotesk-display","Inter Tight",sans-serif;font-weight:600;font-size:44px;letter-spacing:-.04em;line-height:1;text-decoration:none;color:inherit}
.nf-line{margin:16px 0 0;max-width:30ch;opacity:.7}
.nf h4{margin:0 0 16px;font:500 12px/1 "Inter Tight",sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.nf a{color:inherit;text-decoration:none}
.nf-col a{display:block;margin-bottom:9px}
.nf-col a:hover,.nf-bottom a:hover{color:var(--coral)}
.nf-social{display:flex;gap:14px;margin-top:14px}
.nf-social a{display:inline-block;margin:0}
.nf-cta{display:inline-block!important;margin-top:18px!important;padding:12px 20px;border-radius:999px;background:var(--coral);color:#fff!important}
.nf-cta:hover{background:#111!important;color:#fff!important}
.nf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0 28px;border-top:1px solid var(--nh-line,rgba(0,0,0,.12));font-size:13px;opacity:.75}
@media (max-width:991px){.nf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.nf-grid{grid-template-columns:1fr;gap:32px;padding-top:40px}}

/* Product page mockups (2026-10-19): one 2x2 image sheet per product, tiles picked by background-position */
.pp-mock{background-size:200% 200%!important;background-repeat:no-repeat!important;background-color:#1c1c1c!important}
.pp-mock .pp-main-name{display:none!important}
.pp-thumb.pp-mock{cursor:pointer;transition:opacity .2s;outline-offset:3px}
.pp-thumb.pp-mock:hover{opacity:.85}
.pp-thumb.pp-mock.on{outline:2px solid var(--coral)}
.pp-note.pp-hide{display:none!important}

/* Project story under the header image (2026-10-19): homepage statement + gap layout, no coral */
.pjx-statement{margin-top:clamp(60px,7vw,130px)!important}
.pjx-gap .copy-heading{color:#000!important}
.pjx-services{margin-top:26px;font-size:15px;line-height:1.5;color:#777}
.pjx-services b{display:block;font-weight:500;color:#111;margin-bottom:4px}
.pjx-gap{align-items:flex-start!important}
.pjx-gap .gap-img{align-self:flex-start;height:auto!important;aspect-ratio:auto!important}
.pjx-gap .gap-img img{width:100%;height:auto!important;object-fit:cover;display:block}
.pstory.pjx-old{display:none!important}
.pjx-gap .copy-body a{color:#000!important;text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:500}
.pjx-gap .copy-body a:hover{opacity:.6}
/* Project header text never italic (old CMS copy wraps it in <em>), 2026-10-19 */
.phero-hook em,.phero-hook i,.phero-title em{font-style:normal!important}
/* Header video (projects with an animated header) */

.phero-img-holder video.phero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pjx-gap .gap-img video.pjx-video{width:100%;height:auto;display:block}

/* Marketing page: marketing work grid pulled from /work (2026-10-19) */
.mk-work{padding:0 clamp(16px,2vw,40px);margin-top:clamp(80px,8vw,150px)}
.mk-work .mk-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(30px,3vw,50px)}
.mk-work .work-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,34px)!important;align-items:start}
@media (max-width:991px){.mk-work .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.mk-work{padding:0 24px}.mk-work .work-grid{grid-template-columns:1fr}}
.mk-work .work-item{margin:0!important}
.mk-work .work-fig{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;overflow:hidden}
.mk-work .work-fig img{width:100%!important;height:100%!important;object-fit:cover;display:block}
.mk-work .work-line:empty{display:none}