/* ==========================================================================
   Crew + brand-side components
   Loaded only by: /, /services/, /services/social-media/, /services/creator-partnerships/
   Rule these components enforce: a crew member only ever appears next to the
   service they own. Kevin = Paid Media (+ Track & Optimize), Pat = SEO & Content,
   Dale = Websites, Bobby = Email, Shelly = Social, Poppy = Creator Partnerships,
   Ollie = Brand & Message, Mo = the host (team, not a service).
   ========================================================================== */

/* ---------- Crew lineup (homepage band + services hub) ----------
   Everyone shares one floor. Mo stands front and center; each step away from him
   is one step further back: a little smaller, feet a little higher, lower in the
   stack. --h is the snack's real height relative to Bobby (from the homepage hero)
   times its depth scale. --d is depth. */
.crew-band, .crew-hub{background:var(--primary); color:#fff; overflow:hidden}
.crew-band{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.crew-hub{padding:calc(var(--nav-height) + var(--space-3)) 0 clamp(40px,5vw,64px)}
.crew-hub .svc-breadcrumb, .crew-hub .svc-breadcrumb a, .crew-hub .svc-breadcrumb span{color:rgba(255,255,255,.7)}
.crew-hub .svc-breadcrumb [aria-current]{color:#fff}
.crew-band__head, .crew-hub__head{text-align:center; margin:0 auto clamp(34px,4.5vw,60px)}
.crew-band__kicker, .crew-hub__kicker{display:inline-block; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px; margin:0 0 14px}
.crew-band__title, .crew-hub__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,4.6vw,3.8rem); line-height:1; letter-spacing:-.03em; color:#fff; margin:0}
.crew-hub__title span, .crew-band__title span{display:block; color:var(--brand-3); font-size:.46em; letter-spacing:-.01em; margin-top:12px; font-weight:700}

.crew-line__scroll{position:relative}
.crew-line{
  --stage:clamp(250px,30vw,420px); --step:clamp(12px,1.8vw,26px);
  list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:1.25fr 1.25fr 1.25fr 1.5fr .94fr .94fr .94fr .94fr; align-items:start;
}
.crew-line__member{margin:0; position:relative; z-index:calc(10 - var(--d))}
.crew-line__member a{display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:#fff; outline:none}
.crew-line__fig{position:relative; display:block; width:100%; height:calc(var(--stage) * .8)}
.crew-line__fig img{
  position:absolute; left:50%; bottom:calc(var(--d) * var(--step));
  height:calc(var(--h) * var(--stage) * .8); width:auto; max-width:none;
  transform:translateX(-50%); transform-origin:50% 100%;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.22));
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2), filter .3s ease;
}
/* soft floor shadow under each snack */
.crew-line__fig::after{
  content:""; position:absolute; left:50%; bottom:calc(var(--d) * var(--step) - 8px); transform:translateX(-50%);
  width:calc(var(--h) * var(--stage) * .55); height:18px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,8,30,.55), transparent); z-index:-1;
  transition:transform .35s ease, opacity .3s ease;
}
.crew-line__svc{margin-top:18px; font-family:var(--font-display); font-weight:800; font-size:clamp(.95rem,1.25vw,1.18rem); line-height:1.15; color:#fff; padding:0 4px; transition:color .2s ease}
.crew-line__name{margin-top:4px; font-size:clamp(.72rem,.85vw,.82rem); line-height:1.25; color:rgba(255,255,255,.62); font-weight:600; padding:0 4px}
.crew-line__member--host .crew-line__svc{color:var(--brand-secondary)}
.crew-line__member:hover, .crew-line__member:focus-within{z-index:30}
.crew-line__member a:hover .crew-line__fig img,
.crew-line__member a:focus-visible .crew-line__fig img{transform:translateX(-50%) scale(1.1); filter:drop-shadow(0 18px 18px rgba(0,0,0,.3))}
.crew-line__member a:hover .crew-line__fig::after{transform:translateX(-50%) scale(1.15); opacity:.8}
.crew-line__member a:hover .crew-line__svc, .crew-line__member a:focus-visible .crew-line__svc{color:var(--brand-secondary)}
.crew-line__member a:focus-visible .crew-line__svc{text-decoration:underline; text-underline-offset:4px}
@media (max-width:900px){
  .crew-line__scroll{overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
  .crew-line__scroll::-webkit-scrollbar{display:none}
  .crew-line{min-width:620px; --stage:230px; --step:9px}
  .crew-line__svc{font-size:.86rem; margin-top:12px}
  .crew-line__name{font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){ .crew-line__fig img{transition:none} }

/* ---------- Meet our leaders (homepage) ---------- */
.leaders{padding:clamp(56px,7vw,100px) 0; background:#fff}
.leaders__head{text-align:center; max-width:720px; margin:0 auto clamp(28px,4vw,48px)}
.leaders__eyebrow{
  display:inline-block; background:var(--brand-3); color:#000; font-family:var(--font-display);
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; margin:0 0 14px;
}
.leaders__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,6vw,4.6rem); line-height:.98; letter-spacing:-.035em; color:var(--primary); margin:0}
.leaders__sub{margin:12px 0 0; font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.4rem); color:var(--text-color-04)}
.leaders__foot{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 26px; margin-top:clamp(26px,3vw,40px)}
.leaders__team{font-family:var(--font-display); font-weight:800; color:var(--primary); text-decoration:none; border-bottom:2px solid var(--brand-secondary); padding-bottom:2px}
.leader__li{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; background:#0A66C2; color:#fff; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 8px 18px -10px rgba(10,102,194,.8)}
.leader__li svg{width:22px; height:22px}
.leader__li:hover{transform:translateY(-2px)}
.leaders__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); max-width:1180px; margin:0 auto}
.leader{display:flex; flex-direction:column; background:var(--cream); border-radius:22px; overflow:hidden}
.leader__media{position:relative; aspect-ratio:5/4; overflow:hidden; background:#01286b}
.leader__media img{width:100%; height:100%; object-fit:cover; display:block}
.leader__media .meet-joe__video{position:absolute; inset:0; border-radius:0; aspect-ratio:auto; height:100%; transform:none; box-shadow:none}
.leader__media .meet-joe__video:hover{transform:none}
.leader__media .meet-joe__poster{width:100%; height:100%; object-fit:cover}
.leader__tag{
  position:absolute; left:16px; bottom:16px; z-index:2;
  display:flex; align-items:center; gap:8px; background:#fff; color:var(--primary);
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  padding:6px 14px 6px 6px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.leader__tag img{width:28px; height:28px; object-fit:contain}
.leader__body{padding:clamp(22px,2.8vw,34px); display:flex; flex-direction:column; gap:12px; flex:1}
.leader__name{font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.05; letter-spacing:-.02em; color:var(--primary); margin:0}
.leader__role{display:block; font-size:.55em; color:var(--text-color-04); margin-top:6px; letter-spacing:0}
.leader__body p{margin:0; font-size:1.02rem; line-height:1.6; color:var(--text-color-02)}
.leader__cta{margin-top:auto; padding-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
@media (max-width:820px){ .leaders__grid{grid-template-columns:1fr} }

/* ---------- Instagram phone (faux feed) ---------- */
.ig-show{padding:clamp(56px,7vw,100px) 0; background:var(--primary); color:#fff; overflow:hidden}
.ig-show__grid{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,6vw,90px); align-items:center}
.ig-show__eyebrow{
  display:inline-block; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display);
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 16px; border-radius:999px; margin:0 0 16px;
}
.ig-show__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4.2vw,3.3rem); line-height:1.02; letter-spacing:-.025em; color:#fff; margin:0 0 16px}
.ig-show__title em{font-style:normal; color:var(--brand-secondary)}
.ig-show__copy p{font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,.82); margin:0 0 14px; max-width:52ch}
.ig-show__link{display:inline-flex; align-items:center; gap:10px; margin-top:10px; color:#fff; font-family:var(--font-display); font-weight:700; text-decoration:none; border-bottom:2px solid var(--brand-secondary); padding-bottom:3px}
.ig-show__link svg{width:20px; height:20px}
.ig-show--light{background:var(--cream); color:inherit}
.ig-show--light .ig-show__title{color:var(--primary)}
.ig-show--light .ig-show__copy p{color:var(--text-color-02)}
.ig-show--light .ig-show__link{color:var(--primary)}
@media (max-width:900px){
  .ig-show__grid{grid-template-columns:1fr}
  .ig-show__phone-wrap{justify-self:center}
}

.ig-phone{
  --w:clamp(280px,30vw,340px);
  width:var(--w); aspect-ratio:9/19; position:relative;
  background:#0d0d0f; border-radius:calc(var(--w) * .15); padding:calc(var(--w) * .035);
  box-shadow:0 0 0 2px #2b2b30, 0 40px 80px -30px rgba(0,0,0,.6);
  transform:rotate(3deg);
}
.ig-show--light .ig-phone{box-shadow:0 0 0 2px #2b2b30, 0 40px 80px -30px rgba(0,40,107,.45)}
.ig-phone__screen{
  position:relative; width:100%; height:100%; background:#fff; color:#0f0f0f;
  border-radius:calc(var(--w) * .12); overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column;
}
.ig-phone__island{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:32%; height:22px; background:#0d0d0f; border-radius:999px; z-index:3}
.ig-phone__status{display:flex; justify-content:space-between; align-items:center; padding:13px 22px 0; font-size:11px; font-weight:600; height:36px; flex:none}
.ig-phone__status i{display:inline-block; width:18px; height:9px; border:1.5px solid #0f0f0f; border-radius:3px; position:relative}
.ig-phone__status i::after{content:""; position:absolute; inset:1px 4px 1px 1px; background:#0f0f0f; border-radius:1px}
.ig-phone__bar{display:flex; align-items:center; gap:6px; padding:6px 14px 4px; font-weight:700; font-size:14px; flex:none}
.ig-phone__bar svg{width:14px; height:14px}
.ig-phone__bar b{flex:1; font-weight:700}
.ig-phone__prof{display:flex; align-items:center; gap:14px; padding:6px 14px 0; flex:none}
.ig-phone__avatar{
  width:62px; height:62px; border-radius:50%; flex:none; padding:2px;
  background:conic-gradient(from 200deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5,#feda75);
}
.ig-phone__avatar span{display:block; width:100%; height:100%; border-radius:50%; background:var(--primary); border:2px solid #fff; overflow:hidden}
.ig-phone__avatar img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.ig-phone__name{font-size:12.5px; font-weight:700; line-height:1.2}
.ig-phone__bio{font-size:11px; line-height:1.35; color:#333; margin-top:2px}
.ig-phone__btns{display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px 14px 0; flex:none}
.ig-phone__btn{display:block; text-align:center; font-size:11.5px; font-weight:600; padding:6px 0; border-radius:8px; background:#efefef; color:#0f0f0f; text-decoration:none}
.ig-phone__btn--follow{background:#0095f6; color:#fff}
.ig-phone__hl{display:flex; gap:10px; padding:12px 14px 8px; overflow:hidden; flex:none}
.ig-phone__hl span{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:#333; flex:none; width:46px}
.ig-phone__hl img{width:46px; height:46px; border-radius:50%; object-fit:contain; object-position:center bottom; background:#f4f6f8; border:1px solid #dbdbdb; padding:4px 4px 0}
.ig-phone__tabs{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #efefef; flex:none}
.ig-phone__tabs span{display:flex; justify-content:center; padding:7px 0; border-bottom:1.5px solid transparent}
.ig-phone__tabs span:first-child{border-bottom-color:#0f0f0f}
.ig-phone__tabs svg{width:15px; height:15px; opacity:.4}
.ig-phone__tabs span:first-child svg{opacity:1}
.ig-phone__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; flex:1; align-content:start; overflow:hidden}

/* Tiles use Instagram's current 3:4 profile-grid crop */
.ig-tile{position:relative; display:block; aspect-ratio:3/4; overflow:hidden; text-decoration:none; background:var(--tile,#00286b)}
.ig-tile img{position:absolute; left:50%; bottom:-4%; transform:translateX(-50%); height:62%; width:auto; max-width:none; transition:transform .3s ease}
.ig-tile img.ig-tile__photo{left:0; bottom:0; transform:none; width:100%; height:100%; object-fit:cover}
.ig-tile__txt{
  position:absolute; left:6%; right:20%; top:7%; z-index:1;
  font-family:var(--font-display); font-weight:800; font-size:9px; line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em; color:var(--ink,#fff);
}
.ig-tile__reel{position:absolute; top:5px; right:5px; width:11px; height:11px; z-index:2; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.ig-tile:hover img{transform:translateX(-50%) translateY(-4px) scale(1.04)}
.ig-tile:hover img.ig-tile__photo{transform:scale(1.04)}
.ig-tile--navy{--tile:#00286b; --ink:#febc43}
.ig-tile--gold{--tile:#febc43; --ink:#00286b}
.ig-tile--teal{--tile:#92cacd; --ink:#00286b}
.ig-tile--cream{--tile:#f4f6f8; --ink:#00286b}
.ig-tile--red{--tile:#e4463f; --ink:#fff}
@media (max-width:420px){ .ig-phone{--w:268px} }
@media (prefers-reduced-motion:reduce){ .ig-phone{transform:none} .ig-tile img{transition:none} }

/* ---------- Brand-side service pages ---------- */
.bs-center-title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.04; letter-spacing:-.025em; color:var(--primary); text-align:center; margin:0 0 clamp(26px,3.5vw,44px)}

.bs-hero{position:relative; background:var(--primary); color:#fff; overflow:hidden; padding:calc(var(--nav-height) + var(--space-3)) 0 0}
.bs-hero .svc-breadcrumb, .bs-hero .svc-breadcrumb a, .bs-hero .svc-breadcrumb span{color:rgba(255,255,255,.7)}
.bs-hero .svc-breadcrumb [aria-current]{color:#fff}
.bs-hero__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(20px,4vw,56px); align-items:end}
.bs-hero__copy{padding:clamp(18px,3vw,36px) 0 clamp(48px,7vw,96px); align-self:center}
.bs-hero__kicker{display:inline-block; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px; margin:0 0 18px}
.bs-hero__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:.98; letter-spacing:-.035em; color:#fff; margin:0 0 20px; text-wrap:balance}
.bs-hero__title em{font-style:normal; color:var(--brand-secondary)}
.bs-hero__sub{font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.55; color:rgba(255,255,255,.84); margin:0 0 26px; max-width:46ch}
.bs-hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.bs-hero__art{position:relative; align-self:end; display:flex; justify-content:center; min-height:clamp(280px,34vw,460px)}
.bs-hero__art > img{position:relative; z-index:1; width:auto; height:clamp(260px,30vw,420px); object-fit:contain; object-position:bottom}
.bs-hero__disc{position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:118%; aspect-ratio:1; border-radius:50%; background:rgba(146,202,205,.14)}
.bs-hero__art--phone{align-self:center; padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,70px)}
.bs-hero__art--phone .ig-show__phone-wrap{position:relative; z-index:1}
.bs-hero__art > img.bs-hero__peek{position:absolute; z-index:2; left:calc(50% - clamp(230px,24vw,280px)); bottom:clamp(20px,3vw,50px); height:clamp(130px,14vw,190px); width:auto; transform:rotate(-8deg); filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
@media (max-width:860px){
  .bs-hero__grid{grid-template-columns:1fr}
  .bs-hero__copy{padding-bottom:10px}
  .bs-hero__art > img.bs-hero__peek{left:4%}
}

/* platforms: real app colors, detail on hover (the job label always shows) */
.bs-platforms{padding:clamp(52px,6vw,88px) 0; background:#fff}
.bs-platforms__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px)}
.bs-platform{
  position:relative; margin:0; background:#fff; border-radius:20px; padding:clamp(20px,2.2vw,28px) 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:default; outline:none;
  box-shadow:0 2px 4px rgba(0,40,107,.05), 0 14px 30px -16px rgba(0,40,107,.35); border:1px solid rgba(0,40,107,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bs-platform__icon{width:64px; height:64px; border-radius:18px; display:grid; place-items:center; color:#fff; background:var(--app); box-shadow:0 10px 20px -10px var(--app-shadow,rgba(0,0,0,.5)); transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bs-platform__icon svg{width:34px; height:34px}
.bs-platform h3{font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:var(--primary); margin:6px 0 0; text-transform:none}
.bs-platform__job{font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-color-04)}
.bs-platform__more{margin:0; font-size:.9rem; line-height:1.4; color:var(--text-color-02); max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease}
.bs-platform:hover, .bs-platform:focus-visible{transform:translateY(-6px); box-shadow:0 26px 44px -20px rgba(0,40,107,.5)}
.bs-platform:hover .bs-platform__icon, .bs-platform:focus-visible .bs-platform__icon{transform:rotate(-8deg) scale(1.06)}
.bs-platform:hover .bs-platform__more, .bs-platform:focus-visible .bs-platform__more{max-height:4em; opacity:1}
.bs-platform--tiktok{--app:#000; --app-shadow:rgba(0,0,0,.5)}
.bs-platform--tiktok .bs-platform__icon svg{filter:drop-shadow(-2px -1px 0 #25F4EE) drop-shadow(2px 1px 0 #FE2C55)}
.bs-platform--instagram{--app:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); --app-shadow:rgba(214,36,159,.5)}
.bs-platform--facebook{--app:#1877F2; --app-shadow:rgba(24,119,242,.5)}
.bs-platform--linkedin{--app:#0A66C2; --app-shadow:rgba(10,102,194,.5)}
.bs-platform--youtube{--app:#FF0000; --app-shadow:rgba(255,0,0,.45)}
@media (max-width:1000px){ .bs-platforms__list{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .bs-platforms__list{grid-template-columns:1fr 1fr} .bs-platform__icon{width:54px; height:54px} }
@media (hover:none){ .bs-platform__more{display:none} }

/* why now, with Bre */
.bs-why__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.03em; color:var(--primary); margin:0 0 22px}
.bs-why__title em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.bs-why2{padding:clamp(56px,7vw,100px) 0 0; background:var(--cream); overflow:hidden}
.bs-why2__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:center}
.bs-why2__photo{position:relative; display:flex; justify-content:center; align-self:end}
.bs-why2__photo img{position:relative; z-index:1; width:min(100%,380px); height:auto; display:block}
.bs-why2__disc{position:absolute; left:50%; bottom:-18%; transform:translateX(-50%); width:min(110%,480px); aspect-ratio:1; border-radius:50%; background:var(--brand-secondary)}
.bs-why2__tag{position:absolute; z-index:2; right:6%; bottom:14%; margin:0; background:#fff; color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:.85rem; padding:8px 14px; border-radius:999px; box-shadow:0 10px 24px -10px rgba(0,40,107,.4); transform:rotate(-3deg)}
.bs-why2__list{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px}
.bs-why2__list li{margin:0; background:#fff; border-radius:16px; padding:16px 20px; font-size:1.05rem; line-height:1.4; color:var(--text-color-02); box-shadow:0 10px 24px -18px rgba(0,40,107,.4)}
.bs-why2__list b{display:block; font-family:var(--font-display); font-weight:800; color:var(--primary); font-size:1.15rem}
.bs-why2__link{display:inline-block; font-family:var(--font-display); font-weight:800; color:var(--primary); text-decoration:none; border-bottom:2px solid var(--brand-secondary); padding-bottom:2px; margin-bottom:clamp(40px,6vw,90px)}
@media (max-width:860px){
  .bs-why2__grid{grid-template-columns:1fr}
  .bs-why2__photo{order:2}
  .bs-why2__photo img{width:min(78%,320px)}
  .bs-why2__link{margin-bottom:10px}
}

/* three phones */
.bs-phones{padding:clamp(56px,7vw,100px) 0; background:#fff}
.bs-phones__row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px); max-width:1040px; margin:0 auto}
.bs-phones__item{margin:0; display:flex; flex-direction:column; align-items:center; text-align:center}
.bs-phones__item:nth-child(1) .mini-phone{transform:rotate(-4deg)}
.bs-phones__item:nth-child(3) .mini-phone{transform:rotate(4deg)}
.bs-phones__item figcaption{margin-top:26px}
.bs-phones__item h3{font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--primary); margin:0 0 4px; text-transform:none}
.bs-phones__item p{margin:0; font-size:.98rem; color:var(--text-color-02)}
.mini-phone{
  position:relative; width:min(100%,240px); aspect-ratio:9/18.5; border-radius:34px; overflow:hidden; background:#fff;
  border:7px solid #0d0d0f; box-shadow:0 30px 60px -26px rgba(0,40,107,.55);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; text-align:left; color:#0f0f0f;
}
.mini-phone::before{content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:18px; background:#0d0d0f; border-radius:999px; z-index:3}
.mini-phone__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% center}
.mini-phone--reel::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 55%, rgba(0,0,0,.6))}
.mini-phone__rail{position:absolute; z-index:2; right:10px; bottom:70px; display:flex; flex-direction:column; gap:14px; color:#fff}
.mini-phone__rail svg{width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.mini-phone__cap{position:absolute; z-index:2; left:12px; right:50px; bottom:18px; color:#fff; font-size:12px; line-height:1.35}
.mini-phone__cap b{display:block; font-size:12.5px}
.mini-phone__head{margin:0; padding:38px 14px 10px; font-weight:700; font-size:13px; text-align:center; border-bottom:1px solid #efefef}
.mc{display:flex; gap:8px; align-items:flex-start; margin:0; padding:10px 12px 0; font-size:11.5px; line-height:1.3}
.mc img{width:28px; height:28px; border-radius:50%; object-fit:contain; background:#f4f6f8; border:1px solid #e6e6e6; flex:none; padding:2px}
.mc b{display:block; font-size:11px}
.mc--reply{padding-left:34px}
.mc--reply img{width:22px; height:22px; object-fit:cover; padding:0}
.mi{display:grid; grid-template-columns:78px 1fr; gap:8px; align-items:center; padding:12px 14px 0; font-size:11.5px; font-weight:600}
.mi i{display:block; height:12px; border-radius:6px; background:#eef1f5; position:relative; overflow:hidden}
.mi i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:6px; background:linear-gradient(90deg,var(--brand-3),var(--primary))}
.mini-phone__top{margin:16px 14px 6px; font-size:11px; font-weight:700; color:#666; text-transform:uppercase; letter-spacing:.06em}
.mini-phone__toppost{margin:0 14px; display:flex; gap:10px; align-items:center; font-size:11.5px; font-weight:600}
.mini-phone__toppost img{width:64px; aspect-ratio:3/4; object-fit:cover; object-position:62% center; border-radius:8px}
.mini-phone__note{display:flex; align-items:center; gap:8px; margin:18px 12px 0; padding:10px; background:#fff7e6; border-radius:12px; font-size:11.5px; font-weight:600}
.mini-phone__note img{width:28px; height:auto}
@media (max-width:760px){
  .bs-phones__row{grid-template-columns:1fr; gap:44px}
  .bs-phones__item .mini-phone{transform:none!important; width:220px}
}

/* creator: been the creator */
.bs-creator{padding:clamp(56px,7vw,110px) 0; background:var(--primary); color:#fff; overflow:hidden}
.bs-creator__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.bs-creator h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); line-height:1.02; letter-spacing:-.03em; color:#fff; margin:0 0 18px}
.bs-creator h2 em{font-style:normal; color:var(--brand-secondary)}
.bs-creator p{font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.84); margin:0 0 14px; max-width:46ch}
.bs-creator__stats{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.bs-creator__stats li{margin:0; border-top:2px solid var(--brand-secondary); padding-top:10px}
.bs-creator__stats b{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2.2vw,1.8rem); color:#fff; line-height:1.1}
.bs-creator__stats span{font-size:.86rem; color:rgba(255,255,255,.7); line-height:1.35}
.bs-collage{position:relative; width:100%; max-width:640px; aspect-ratio:1/1; margin:0 auto}
.bs-collage__card{margin:0; position:absolute; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); background:#fff}
.bs-collage__card img{display:block; width:100%; height:100%; object-fit:cover}
.bs-collage__card--cut{background:linear-gradient(180deg,#ffffff 0%,#e8edf4 100%)}
.bs-collage__card--cut img{object-fit:contain; object-position:center bottom; padding-top:6%}
.bs-collage__a{left:0; top:4%; width:52%; aspect-ratio:4/5; transform:rotate(-4deg); z-index:2}
.bs-collage__b{right:0; top:0; width:50%; aspect-ratio:3/2; transform:rotate(3deg)}
.bs-collage__c{right:4%; bottom:4%; width:54%; aspect-ratio:3/2; transform:rotate(-2deg); z-index:3}
.bs-collage__trophy{position:absolute; left:8%; bottom:0; width:clamp(120px,14vw,170px); z-index:4; transform:rotate(-6deg); filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
@media (max-width:900px){ .bs-creator__grid{grid-template-columns:1fr} }
@media (max-width:520px){
  .bs-collage{aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .bs-collage__card{position:relative; inset:auto; width:100%; transform:none; margin:0}
  .bs-collage__a{grid-row:span 2; aspect-ratio:auto; height:100%}
  .bs-collage__b,.bs-collage__c{aspect-ratio:4/3}
  .bs-collage__trophy{display:none}
  .bs-creator__stats{grid-template-columns:1fr}
}

/* creator: we handle / you approve */
.bs-split{padding:clamp(56px,7vw,100px) 0; background:var(--cream)}
.bs-split__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); max-width:960px; margin:0 auto}
.bs-split__card{position:relative; background:#fff; border-radius:24px; padding:clamp(24px,3vw,38px); box-shadow:0 2px 4px rgba(0,40,107,.05), 0 18px 36px -20px rgba(0,40,107,.4)}
.bs-split__card h3{font-family:var(--font-display); font-weight:800; font-size:1.5rem; color:var(--primary); margin:0 0 16px; text-transform:none}
.bs-split__card ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.bs-split__card li{margin:0; display:inline-flex; align-items:center; gap:7px; background:var(--cream); color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:.95rem; padding:9px 14px; border-radius:999px}
.bs-split__card li svg{width:15px; height:15px; color:var(--brand-3)}
.bs-split__card--you{background:var(--primary); color:#fff; padding-right:clamp(110px,14vw,170px)}
.bs-split__card--you h3{color:#fff}
.bs-split__card--you li{background:rgba(255,255,255,.1); color:#fff}
.bs-split__card--you li svg{color:var(--brand-secondary)}
.bs-split__card--you p{margin:16px 0 0; font-weight:700; color:var(--brand-secondary)}
.bs-split__card--you img{position:absolute; right:clamp(12px,2vw,24px); bottom:0; height:clamp(110px,13vw,160px); width:auto}
@media (max-width:760px){ .bs-split__grid{grid-template-columns:1fr} .bs-split__card--you{padding-right:clamp(24px,3vw,38px); padding-bottom:140px} }



/* ---------- Services hub: seven panels ---------- */
.svc-panels{background:var(--cream); padding:clamp(48px,6vw,88px) 0}
.svc-panels__head{text-align:center; margin:0 auto clamp(26px,3.5vw,44px)}
.svc-panels__h{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1.05; letter-spacing:-.025em; color:var(--primary); margin:0}
.svc-panels__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px)}
.svc-panel{
  position:relative; overflow:hidden; scroll-margin-top:calc(var(--nav-height) + 20px);
  background:#fff; border-radius:28px; padding:clamp(24px,3vw,38px); min-height:clamp(260px,24vw,320px);
  box-shadow:0 2px 4px rgba(0,40,107,.04), 0 20px 40px -26px rgba(0,40,107,.4);
}
.svc-panel--wide{grid-column:1/-1; background:var(--primary); color:#fff}
.svc-panel__art{
  position:absolute; z-index:0; right:clamp(-10px,1vw,24px); bottom:-10%;
  height:84%; width:auto; max-width:40%; object-fit:contain; object-position:right bottom;
  transform:rotate(-4deg); transform-origin:bottom right; transition:transform .45s cubic-bezier(.2,.9,.25,1.2);
  filter:drop-shadow(0 18px 24px rgba(0,40,107,.18));
}
.svc-panel--wide .svc-panel__art{height:118%; bottom:-22%; max-width:34%; right:3%; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.svc-panel__chat{height:auto; max-width:36%; width:36%; bottom:12%; right:3%; transform:rotate(-3deg); display:flex; flex-direction:column; gap:8px; filter:none}
.svc-chat{margin:0; padding:10px 14px; border-radius:18px; font-size:.9rem; line-height:1.3; font-weight:600; box-shadow:0 10px 20px -12px rgba(0,40,107,.35)}
.svc-chat--them{align-self:flex-start; background:var(--cream); color:var(--primary); border-bottom-left-radius:4px}
.svc-chat--us{align-self:flex-end; background:var(--brand-secondary); color:var(--primary); border-bottom-right-radius:4px}
.svc-panel:hover .svc-panel__art{transform:rotate(0deg) translateY(-8px) scale(1.04)}
.svc-panel__body{position:relative; z-index:1; max-width:56%}
.svc-panel--wide .svc-panel__body{max-width:64%}
.svc-panel__num{margin:0 0 10px; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--brand-secondary)}
.svc-panel:not(.svc-panel--wide) .svc-panel__num{color:var(--primary)}
.svc-panel__who{font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--cream); color:var(--text-color-04)}
.svc-panel--wide .svc-panel__who{background:rgba(255,255,255,.12); color:rgba(255,255,255,.8)}
.svc-panel__title{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.02; letter-spacing:-.02em; color:var(--primary); margin:0 0 6px}
.svc-panel--wide .svc-panel__title{color:#fff}
.svc-panel__tag{margin:0 0 16px; font-size:1.02rem; color:var(--text-color-02)}
.svc-panel--wide .svc-panel__tag{color:rgba(255,255,255,.8)}
.svc-panel__links{list-style:none; margin:0; padding:0}
.svc-panel--wide .svc-panel__links{display:grid; grid-template-columns:1fr 1fr; column-gap:28px}
.svc-panel__links li{margin:0}
.svc-panel__links a{
  display:flex; align-items:center; gap:10px; padding:10px 0; text-decoration:none;
  border-bottom:1px solid rgba(0,40,107,.1); color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:1.02rem;
}
.svc-panel__links a span{flex:1}
.svc-panel__links a b{transition:transform .2s ease; color:var(--brand-secondary); font-size:1.1rem}
.svc-panel__links a:hover b, .svc-panel__links a:focus-visible b{transform:translateX(5px)}
.svc-panel__links a:hover span{text-decoration:underline; text-decoration-color:var(--brand-secondary); text-underline-offset:4px; text-decoration-thickness:2px}
.svc-panel--wide .svc-panel__links a{color:#fff; border-bottom-color:rgba(255,255,255,.14)}
/* Social + Creator: the two brand-side services we want obvious */
.svc-panel__feature a{font-size:1.2rem; padding:12px 0}
.svc-panel__feature img{width:46px; height:46px; object-fit:contain; object-position:bottom; background:rgba(255,255,255,.1); border-radius:14px; padding:4px 4px 0}
.svc-panel__feature a span{color:var(--brand-secondary)}
@media (max-width:860px){
  .svc-panels__grid{grid-template-columns:1fr}
  .svc-panel--wide .svc-panel__links{grid-template-columns:1fr}
}
@media (max-width:560px){
  .svc-panel{padding-top:clamp(24px,3vw,38px)}
  .svc-panel__art{height:150px; bottom:auto; top:14px; right:10px; max-width:40%; transform:rotate(-4deg)}
  .svc-panel__chat{display:none}
  .svc-panel--wide .svc-panel__art{height:170px; top:10px; bottom:auto}
  .svc-panel__body, .svc-panel--wide .svc-panel__body{max-width:none}
  .svc-panel__num, .svc-panel__title, .svc-panel__tag{max-width:58%}
}
@media (prefers-reduced-motion:reduce){ .svc-panel__art{transition:none} }

/* ---------- Follow along: two phones ---------- */
.ig-show__links{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:12px}
.ig-show__phones{position:relative; display:flex; justify-content:center; align-items:center; min-height:clamp(560px,52vw,720px); width:clamp(460px,44vw,620px)}
.ig-show__phones .ig-show__phone-wrap{position:absolute}
.ig-show__phone-wrap--ig{left:0; top:4%; z-index:1}
.ig-show__phone-wrap--ig .ig-phone{transform:rotate(-6deg)}
.ig-show__phone-wrap--li{right:0; bottom:0; z-index:2}
.ig-show__phone-wrap--li .ig-phone{transform:rotate(5deg)}
@media (max-width:900px){
  .ig-show__phones{width:100%; min-height:560px}
  .ig-show__phones .ig-phone{--w:300px}
  .ig-show__phone-wrap--ig{left:0; top:0; transform:scale(.78); transform-origin:left top}
  .ig-show__phone-wrap--li{right:0; bottom:0; transform:scale(.78); transform-origin:right bottom}
}
@media (max-width:440px){
  .ig-show__phones{min-height:470px}
  .ig-show__phone-wrap--ig{transform:scale(.62)}
  .ig-show__phone-wrap--li{transform:scale(.62)}
}

/* LinkedIn company page screen */
.li-phone .ig-phone__screen{background:#f4f2ee}
.li-phone__search{display:flex; align-items:center; gap:8px; padding:4px 12px 8px; background:#fff; flex:none}
.li-phone__in{width:22px; height:22px; color:#0A66C2}
.li-phone__in svg{width:22px; height:22px}
.li-phone__bar{flex:1; background:#eef3f8; border-radius:6px; font-size:11px; color:#666; padding:5px 10px}
.li-phone__banner{height:62px; overflow:hidden; background:#01286b; flex:none}
.li-phone__banner img{width:100%; height:100%; object-fit:cover; object-position:70% center}
.li-phone__co{position:relative; background:#fff; padding:26px 12px 10px; display:flex; flex-direction:column; gap:1px; flex:none; font-size:10.5px; color:#555}
.li-phone__co b{font-size:13.5px; color:#111}
.li-phone__logo{position:absolute; top:-22px; left:12px; width:44px; height:44px; border-radius:6px; overflow:hidden; border:2px solid #fff; background:#01286b}
.li-phone__logo img{width:100%; height:100%; object-fit:cover}
.li-phone__follow{align-self:flex-start; margin-top:6px; background:#0A66C2; color:#fff; font-weight:700; font-size:11px; padding:5px 14px; border-radius:999px; text-decoration:none}
.li-phone__tabs{display:flex; gap:14px; background:#fff; padding:0 12px; border-top:1px solid #eee; font-size:11px; font-weight:600; color:#666; flex:none}
.li-phone__tabs span{padding:7px 0; border-bottom:2px solid transparent}
.li-phone__tabs .on{color:#01754f; border-bottom-color:#01754f}
.li-post{display:block; background:#fff; margin-top:6px; padding:10px 12px; text-decoration:none; color:#111; flex:none}
.li-post__head{display:flex; align-items:center; gap:8px}
.li-post__head img{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:center 30%}
.li-post__head b{display:block; font-size:11.5px}
.li-post__head small{display:block; font-size:9.5px; color:#666}
.li-post__txt{display:block; font-size:11px; line-height:1.35; margin:7px 0}
.li-post__img{display:block; width:calc(100% + 24px); margin:0 -12px; height:120px; object-fit:cover; object-position:62% 30%}
.li-post__acts{display:flex; justify-content:space-around; padding-top:7px; font-size:10px; font-weight:600; color:#666}

/* ---------- What our clients say ---------- */
.proof{position:relative; background:var(--brand-secondary); padding:clamp(60px,7vw,110px) 0; overflow:hidden}
.proof::before{content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.22)}
.proof__grid{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,70px); align-items:center}
.proof__eyebrow{display:inline-block; margin:0 0 14px; background:var(--primary); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px}
.proof__rating{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; color:var(--primary); margin-bottom:clamp(18px,2.5vw,30px)}
.proof__rating b{font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,9vw,7rem); line-height:.85; letter-spacing:-.04em}
.proof__stars{font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:3px}
.proof__rating > span:last-child{font-family:var(--font-display); font-weight:700; font-size:1.1rem}
.laptop{max-width:600px; transform:rotate(-2deg)}
.laptop__screen{background:#fff; border:12px solid #15171c; border-bottom-width:16px; border-radius:16px 16px 4px 4px; overflow:hidden; box-shadow:0 40px 70px -30px rgba(0,40,107,.55)}
.laptop__chrome{display:flex; align-items:center; gap:6px; padding:8px 10px; background:#f1f3f6; border-bottom:1px solid #e3e6ea}
.laptop__chrome i{width:9px; height:9px; border-radius:50%; background:#d5d9df}
.laptop__chrome i:first-child{background:#ff5f57} .laptop__chrome i:nth-child(2){background:#febc2e} .laptop__chrome i:nth-child(3){background:#28c840}
.laptop__chrome span{margin-left:8px; flex:1; background:#fff; border-radius:6px; padding:3px 10px; font-size:11px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.laptop__screen img{display:block; width:100%; height:auto}
.laptop__base{height:18px; margin:0 -7%; background:linear-gradient(#d9dde3,#aeb4bd); border-radius:0 0 18px 18px; position:relative}
.laptop__base::before{content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:18%; height:7px; background:#9aa1ab; border-radius:0 0 8px 8px}
.proof__case{display:inline-block; margin-top:22px; font-family:var(--font-display); font-weight:800; color:var(--primary); text-decoration:none; border-bottom:2px solid var(--primary); padding-bottom:2px}
.proof__quotes{display:flex; flex-direction:column; gap:18px}
.proof__quote{position:relative; margin:0; background:#fff; color:var(--primary); border-radius:24px; padding:clamp(24px,3vw,34px); box-shadow:0 26px 50px -28px rgba(0,40,107,.55); transform:rotate(1.5deg)}
.proof__quote--navy{background:var(--primary); color:#fff; transform:rotate(-1.5deg)}
.proof__mark{position:absolute; top:-18px; left:22px; font-family:Georgia,serif; font-size:6rem; line-height:1; color:var(--brand-secondary); text-shadow:0 4px 0 rgba(0,40,107,.15)}
.proof__quote:not(.proof__quote--navy) .proof__mark{color:var(--primary); text-shadow:none}
.proof__quote blockquote{margin:14px 0 18px; font-size:1.02rem; line-height:1.55}
.proof__quote .rq-lead{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.3rem,2vw,1.6rem); line-height:1.2; margin:4px 0}
.proof__quote figcaption{display:flex; align-items:center; gap:12px; font-size:.86rem; line-height:1.3}
.proof__quote figcaption b{display:block; font-size:1rem}
.proof__face{width:48px; height:48px; border-radius:50%; object-fit:cover; border:3px solid var(--brand-secondary)}
.proof__logo{height:26px; width:auto; margin-left:auto; filter:brightness(0) invert(1); opacity:.9}
.proof__logo--solo{margin-left:0; height:34px; filter:none; opacity:1}
.proof__google{align-self:flex-end; font-family:var(--font-display); font-weight:800; color:var(--primary); text-decoration:none}
@media (max-width:900px){
  .proof__grid{grid-template-columns:1fr}
  .proof__quote, .proof__quote--navy, .laptop{transform:none}
}

/* ---------- Team page ---------- */
.tm-hero{background:var(--primary); color:#fff; text-align:center; padding:calc(var(--nav-height) + var(--space-5)) 0 clamp(120px,14vw,190px)}
.tm-hero__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,6vw,5rem); line-height:.96; letter-spacing:-.035em; color:#fff; margin:0 0 14px}
.tm-hero__title em{font-style:normal; color:var(--brand-secondary)}
.tm-hero__sub{margin:0; font-size:clamp(1.05rem,1.6vw,1.25rem); color:rgba(255,255,255,.8)}
.tm-people{background:var(--cream); padding:0 0 clamp(56px,7vw,100px)}
.tm-people__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,36px); max-width:1180px; margin:calc(-1 * clamp(90px,11vw,150px)) auto 0; position:relative}
.tm-person{background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 2px 4px rgba(0,40,107,.05), 0 30px 60px -34px rgba(0,40,107,.5); display:flex; flex-direction:column}
.tm-person__photo{position:relative; aspect-ratio:5/4; background:#01286b}
.tm-person__photo > img{width:100%; height:100%; object-fit:cover; display:block}
.tm-person__snack{position:absolute; right:16px; bottom:-26px; display:flex; align-items:center; gap:10px; background:var(--brand-secondary); color:var(--primary); border-radius:999px; padding:6px 18px 6px 8px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 14px 26px -14px rgba(0,40,107,.55); transform:rotate(-3deg)}
.tm-person__snack img{width:44px; height:44px; object-fit:contain; background:#fff; border-radius:50%; padding:3px}
.tm-person__snack b{display:block; font-size:.98rem; letter-spacing:0; text-transform:none; font-family:var(--font-display)}
.tm-person__body{padding:clamp(30px,3.4vw,42px) clamp(22px,3vw,36px) clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:10px; flex:1}
.tm-person__name{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1; letter-spacing:-.025em; color:var(--primary); margin:0}
.tm-person__side{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text-color-04)}
.tm-person__facts{list-style:none; margin:8px 0 6px; padding:0; display:grid; gap:8px}
.tm-person__facts li{margin:0; display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(0,40,107,.1); font-family:var(--font-display); font-weight:700; color:var(--primary)}
.tm-person__facts li span{font-family:var(--font-body); font-weight:600; color:var(--text-color-04); font-size:.9rem}
.tm-person__cta{margin-top:auto; padding-top:10px; display:flex; align-items:center; gap:10px}
@media (max-width:820px){ .tm-people__grid{grid-template-columns:1fr} }
@media (max-width:480px){ .tm-person__facts li{flex-direction:column; gap:2px} }

/* about cards + other LinkedIn spots */
.about-team__wrap{position:relative}
.about-team__wrap > .about-team__card{height:100%}
.about-team__li{position:absolute; top:14px; right:14px; z-index:2}
.bs-why2__links{display:flex; align-items:center; gap:14px; margin-bottom:clamp(40px,6vw,90px)}
.bs-why2__links .bs-why2__link{margin-bottom:0}
.bs-creator__sig{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:800}
.bs-creator__sig a:first-child{color:#fff; text-decoration:none; border-bottom:2px solid var(--brand-secondary)}
.bs-creator__sig .leader__li{width:40px; height:40px}

/* round 6: smaller LinkedIn phone on desktop, bigger Shelly + Poppy on the Brand & Message links */
@media (min-width:901px){ .ig-show__phone-wrap--li .ig-phone{--w:clamp(240px,24vw,290px)} }
.svc-panel__feature a{padding:8px 0}
.svc-panel__feature img{width:auto; height:84px; max-width:90px; background:none; padding:0; border-radius:0; margin:-10px 0 -6px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); transition:transform .3s cubic-bezier(.2,.9,.25,1.2)}
.svc-panel__feature a:hover img{transform:translateY(-4px) rotate(-5deg) scale(1.06)}

/* round 7: Joe's play button moves to the corner so his face stays clear (both photos keep the same crop) */
.leader__media .meet-joe__play{inset:auto; left:20px; bottom:20px; margin:0; width:64px; height:64px; border-width:3px}
.leader__media .meet-joe__play svg{width:24px; height:24px}
.leader__media .meet-joe__video-badge{left:96px; bottom:37px; background:#fff; color:var(--primary); backdrop-filter:none; border-radius:999px; padding:6px 14px; box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.leader__media .meet-joe__video:hover .meet-joe__play{transform:scale(1.08)}

/* round 7: team cards no longer overlap the navy header, so the navy photos don't blend into it */
.tm-hero{padding-bottom:clamp(56px,7vw,90px)}
.tm-people{padding-top:clamp(40px,5vw,70px)}
.tm-people__grid{margin-top:0}
.tm-person__photo{margin:12px 12px 0; border-radius:20px; overflow:visible}
.tm-person__photo > img{border-radius:20px}

/* ---------- round 8: phones. Nothing scrolls sideways, pairs sit side by side ----------
   Sideways swipes hide content from anyone who doesn't think to swipe, so the crew
   becomes a 4 + 4 grid with Mo first ("start here" reads first), everyone on one
   floor per row. Leaders, team cards and the problem panels go two across with
   tighter type instead of stacking into a long scroll. */
@media (max-width:900px){
  .crew-line__scroll{overflow:visible; margin:0; padding:0}
  .crew-line{min-width:0; --stage:clamp(150px,28vw,240px); --step:0px; grid-template-columns:repeat(4,1fr); row-gap:22px; column-gap:2px}
  .crew-line__member--host{order:-1}
  .crew-line__fig{height:calc(var(--stage) * .8)}
  .crew-line__fig img{max-width:112%}
  .crew-line__fig::after{bottom:-6px}
  .crew-line__svc{font-size:.8rem; margin-top:8px; padding:0 1px}
  .crew-line__name{font-size:.66rem; padding:0 1px}
}
@media (max-width:600px){
  .crew-line{--stage:clamp(140px,44vw,190px); row-gap:14px}
}

/* the "one of two ways" panels: the 380px flex-basis on the closing line turned into
   a 380px HEIGHT once the footer stacked, which was the big empty gap above the button */
@media (max-width:900px){
  .problem__foot{gap:18px}
  .problem__close{flex:none}
}
@media (max-width:600px){
  .problem__pair{grid-template-columns:1fr 1fr; gap:10px}
  .problem__panel{padding:18px 14px 0; border-radius:16px; gap:0}
  .problem__label{font-size:.98rem; margin-bottom:8px}
  .problem__body{font-size:.84rem; line-height:1.45; margin-bottom:10px}
  .problem__fig,
  .problem__panel--light .problem__fig,
  .problem__panel--dark .problem__fig{width:100%; margin:auto -14px -1px auto; max-width:none}
  .problem__panel--dark .problem__fig{width:118%; margin-right:-14px}
  .problem__panel{display:flex; flex-direction:column}
  .problem__fig{margin-top:auto; align-self:flex-end}
}

/* leaders + team cards two across on phones */
@media (max-width:820px){
  .leaders__grid, .tm-people__grid{grid-template-columns:1fr 1fr; gap:12px}
}
@media (max-width:600px){
  .leaders__title{font-size:2.3rem}
  .leader{border-radius:16px}
  .leader__media{aspect-ratio:4/5}
  .leader__media .meet-joe__play{left:10px; bottom:10px; width:42px; height:42px; border-width:2px}
  .leader__media .meet-joe__play svg{width:16px; height:16px}
  .leader__media .meet-joe__video-badge{display:none}
  .leader__body{padding:14px 12px 16px; gap:8px}
  .leader__name{font-size:1.2rem}
  .leader__role{font-size:.62em}
  .leader__body p{font-size:.84rem; line-height:1.45}
  .leader__cta{gap:8px; flex-wrap:nowrap}
  .leader__cta .primary-button, .tm-person__cta .primary-button{padding:10px 12px; min-height:44px; flex:1; justify-content:center}
  .leader__cta .button-text-primary-v1, .tm-person__cta .button-text-primary-v1{font-size:.8rem; white-space:nowrap}
  .leader__li{width:44px; height:44px; flex:none; border-radius:10px}
  .leader__more{display:none}
  .leader__li svg{width:18px; height:18px}

  .tm-person{border-radius:18px}
  .tm-person__photo{margin:8px 8px 0; border-radius:14px; aspect-ratio:4/5}
  .tm-person__photo > img{border-radius:14px}
  .tm-person__snack{left:6px; right:6px; bottom:-22px; padding:4px 8px 4px 4px; gap:6px; font-size:.5rem; line-height:1.15}
  .tm-person__snack img{width:30px; height:30px; padding:2px}
  .tm-person__snack b{font-size:.7rem; margin-top:1px}
  .tm-person__body{padding:28px 12px 16px; gap:6px}
  .tm-person__name{font-size:1.2rem}
  .tm-person__side{font-size:.82rem}
  .tm-person__facts{margin:4px 0; gap:0}
  .tm-person__facts li{flex-direction:column; gap:2px; padding:8px 0; font-size:.8rem; line-height:1.3}
  .tm-person__facts li span{font-size:.68rem}
  .tm-person__cta{gap:8px}
}

/* ---------- Crew lineup: phone + tablet (two rows with real depth) ----------
   Top: Dale, Kevin, MO, Pat, Bobby. Bottom: Poppy, OLLIE, Shelly. Front snacks are
   the same height; each step out is a little smaller, feet a little higher, and
   tucked behind, so they overlap like the desktop line. */
.crew-lineup-m{display:none}
@media (max-width:900px){
  .crew-line__scroll{display:none}
  .crew-lineup-m{display:flex; flex-direction:column; gap:18px; max-width:560px; margin:0 auto}
  .crew-line.crew-line--m{min-width:0; max-width:none; margin:0; row-gap:0; column-gap:0; --stage:clamp(190px,50vw,250px); --step:clamp(10px,3vw,16px)}
  .crew-line--top{grid-template-columns:.78fr .9fr 1.3fr .9fr .78fr}
  .crew-line--bottom{grid-template-columns:.72fr 1.3fr .72fr; max-width:380px!important; margin:0 auto!important}
  .crew-line--m .crew-line__member--host{order:0}
  .crew-line--m .crew-line__fig{height:calc(var(--stage) * .86)}
  .crew-line--m .crew-line__fig img{height:calc(var(--h) * var(--stage) * .92); max-width:none}
  .crew-line--m .crew-line__fig::after{bottom:calc(var(--d) * var(--step) - 6px)}
  .crew-line--m .crew-line__svc{font-size:.8rem; margin-top:8px; padding:0 1px}
  .crew-line--m .crew-line__name{font-size:.64rem; padding:0 1px}
  .crew-line--top .crew-line__member:not(.crew-line__member--host) .crew-line__svc{font-size:.72rem}
  .crew-line--top .crew-line__member:not(.crew-line__member--host) .crew-line__name{font-size:.58rem}
}

/* ---------- Homepage: Marketing usually breaks one of two ways ---------- */
.breaks{background:var(--cream); padding:clamp(60px,7vw,110px) 0; overflow:hidden}
.breaks__title{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.02; letter-spacing:-.03em; color:var(--primary); text-align:center; margin:0 auto clamp(30px,4vw,54px); max-width:16ch}
.breaks__title em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.breaks__row{display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.9fr) minmax(0,1fr); align-items:center; gap:clamp(12px,2vw,28px); max-width:1120px; margin:0 auto}
.breaks__card{background:#fff; border-radius:26px; padding:clamp(24px,3vw,38px); box-shadow:0 2px 4px rgba(0,40,107,.05), 0 24px 44px -26px rgba(0,40,107,.45); transform:rotate(-2deg)}
.breaks__card--navy{background:var(--primary); color:#fff; transform:rotate(2deg)}
.breaks__num{display:inline-block; font-family:var(--font-display); font-weight:800; font-size:.85rem; letter-spacing:.08em; color:var(--primary); background:var(--brand-secondary); border-radius:999px; padding:4px 12px; margin-bottom:14px}
.breaks__card h3{font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.3vw,1.9rem); line-height:1.08; letter-spacing:-.02em; color:var(--primary); margin:0 0 10px; text-transform:none}
.breaks__card--navy h3{color:#fff}
.breaks__card p{margin:0; font-size:1.05rem; line-height:1.5; color:var(--text-color-02)}
.breaks__card--navy p{color:rgba(255,255,255,.82)}
.breaks__mo{position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:clamp(240px,24vw,330px)}
.breaks__disc{position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:88%; aspect-ratio:1; border-radius:50%; background:var(--brand-secondary)}
.breaks__mo img{position:relative; z-index:1; width:auto; height:clamp(230px,23vw,320px); filter:drop-shadow(0 18px 22px rgba(0,40,107,.25))}
.breaks__or{position:absolute; z-index:2; top:8%; right:6%; font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:#fff; background:var(--primary); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:0 10px 20px -8px rgba(0,40,107,.6); transform:rotate(8deg)}
.breaks__foot{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 24px; margin-top:clamp(34px,4.5vw,56px); text-align:center}
.breaks__foot p{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem,1.8vw,1.45rem); color:var(--primary)}
@media (max-width:860px){
  .breaks__row{grid-template-columns:1fr; max-width:460px; gap:8px}
  .breaks__card, .breaks__card--navy{transform:none; text-align:center}
  .breaks__mo{min-height:230px; margin:6px 0}
  .breaks__mo img{height:220px}
  .breaks__disc{width:210px}
  .breaks__or{right:calc(50% - 130px)}
}

/* ---------- round 9: phone order fixes ---------- */
/* hero: headline, then the crew photo, then the sentence, then the button */
@media (max-width:1023px){
  .hero-scene--crew .hero-scene__inner, .hero-scene--crew .hero-scene__content{display:contents}
  .hero-scene--crew .hero-scene__eyebrow{order:1; align-self:center}
  .hero-scene--crew .hero-scene__title{order:2}
  .hero-scene--crew .hero-scene__pic{order:3; margin:0 0 18px}
  .hero-scene--crew .hero-scene__text{order:4; max-width:600px}
  .hero-scene--crew .hero-scene__cta{order:5; margin-bottom:clamp(36px,6vw,56px)}
}
/* work: Lotus photo, numbers and the case study link first, then the words */
@media (max-width:900px){
  .csx-feature__grid{display:flex!important; flex-direction:column; gap:18px}
  .csx-feature__copy{display:contents}
  .csx-feature__shot{order:1}
  .csx-feature__stats{order:2; margin:0!important}
  .csx-link{order:3}
  .csx-tag{order:4}
  .csx-feature__copy h3{order:5; margin:4px 0 0}
  .csx-feature__copy p{order:6; margin:0}
}
/* follow along: phones, then each link under its phone, then the words */
.ig-show__phonelinks{display:none}
@media (max-width:900px){
  .ig-show--duo .ig-show__grid{display:flex; flex-direction:column; gap:18px}
  .ig-show--duo .ig-show__phones{order:1}
  .ig-show--duo .ig-show__phonelinks{order:2; display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:520px; margin:0 auto}
  .ig-show--duo .ig-show__copy{order:3; text-align:center}
  .ig-show--duo .ig-show__links{display:none}
  .ig-show__phonelinks a{display:flex; justify-content:center; align-items:center; gap:8px; padding:12px 10px; border-radius:14px; background:rgba(255,255,255,.1); color:#fff; font-family:var(--font-display); font-weight:800; text-decoration:none}
  .ig-show__phonelinks a svg{width:20px; height:20px}
}

/* round 10: follow along reads header, "follow along", phones, links, words */
.ig-show--duo .ig-show__title{margin-bottom:12px}
.ig-show--duo .ig-show__eyebrow{margin:0 0 20px}
.ig-show__p b{color:var(--brand-secondary); font-family:var(--font-display)}
@media (max-width:900px){
  .ig-show--duo .ig-show__copy{display:contents}
  .ig-show--duo .ig-show__title{order:1; text-align:center; margin:0}
  .ig-show--duo .ig-show__eyebrow{order:2; align-self:center; margin:0}
  .ig-show--duo .ig-show__phones{order:3}
  .ig-show--duo .ig-show__phonelinks{order:4}
  .ig-show--duo .ig-show__p{order:5; text-align:center; margin:0 auto; max-width:46ch}
}

/* ---------- Marketing P&L: angled laptop with the sample report ---------- */
.pl-band__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,72px); align-items:center}
.pl-band__grid .pl-band__inner{max-width:none}
.tilt-laptop{position:relative; perspective:1800px; padding:10px 0 30px}
.tilt-laptop .laptop{max-width:640px; margin:0 auto; transform:rotateY(-18deg) rotateX(7deg) rotateZ(1.5deg); transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tilt-laptop:hover .laptop{transform:rotateY(-8deg) rotateX(4deg) rotateZ(.5deg)}
.tilt-laptop .laptop__screen{box-shadow:30px 40px 70px -30px rgba(0,40,107,.55)}
.tilt-laptop__tag{position:absolute; left:4%; bottom:6px; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display); font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; box-shadow:0 10px 20px -10px rgba(0,40,107,.5); transform:rotate(-4deg)}
.pl-preview{background:var(--cream); padding:clamp(56px,7vw,100px) 0}
.pl-preview__grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,72px); align-items:center}
.pl-preview__h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.05; letter-spacing:-.025em; color:var(--primary); margin:0 0 14px}
.pl-preview__p{font-size:1.08rem; line-height:1.6; color:var(--text-color-02); margin:0; max-width:44ch}
@media (max-width:900px){
  .pl-band__grid, .pl-preview__grid{grid-template-columns:1fr}
  .pl-band__art{order:-1}
  .tilt-laptop .laptop{transform:rotateY(-10deg) rotateX(5deg)}
}
@media (prefers-reduced-motion:reduce){ .tilt-laptop .laptop{transition:none} }

/* ---------- Bre profile: then and now gallery ---------- */
.bre-gallery{background:var(--primary); color:#fff; padding:clamp(56px,7vw,100px) 0}
.bre-gallery__head{text-align:center; max-width:720px; margin:0 auto clamp(28px,4vw,48px)}
.bre-gallery__h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em; color:#fff; margin:0 0 12px}
.bre-gallery__h2 em{font-style:normal; color:var(--brand-secondary)}
.bre-gallery__sub{margin:0; font-size:1.08rem; color:rgba(255,255,255,.8)}
.bre-gallery__grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(120px,14vw,200px); gap:clamp(8px,1.2vw,16px)}
.bre-gallery__grid figure{margin:0; border-radius:18px; overflow:hidden; background:#0a2a66; box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.bre-gallery__grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.bre-gallery__grid figure:hover img{transform:scale(1.04)}
.bg-a{grid-column:1; grid-row:1 / span 2}
.bg-b{grid-column:2 / span 2; grid-row:1}
.bg-c{grid-column:4; grid-row:1}
.bg-d{grid-column:4; grid-row:2 / span 2}
.bg-e{grid-column:2 / span 2; grid-row:2 / span 2}
.bg-f{grid-column:1; grid-row:3}
.bg-a img, .bg-d img{object-position:center 30%}
@media (max-width:700px){
  .bre-gallery__grid{grid-template-columns:1fr 1fr; grid-auto-rows:150px}
  .bg-a{grid-column:1; grid-row:1 / span 2}
  .bg-b{grid-column:2; grid-row:1}
  .bg-c{grid-column:2; grid-row:2}
  .bg-d{grid-column:2; grid-row:3 / span 2}
  .bg-e{grid-column:1; grid-row:3}
  .bg-f{grid-column:1; grid-row:4}
}
.pl-band, .pl-preview{overflow-x:clip}

/* ---------- Brand & Message page ---------- */
.bs-center-title em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.bbrand-hero{padding-bottom:clamp(30px,4vw,50px)}
.bbrand-hero__copy{text-align:center; max-width:820px; margin:clamp(10px,2vw,24px) auto clamp(20px,3vw,34px)}
.bbrand-hero__copy .bs-hero__sub{margin-left:auto; margin-right:auto}
.bbrand-hero__copy .bs-hero__cta{justify-content:center}
.bbrand-hero__copy .bs-hero__cta .primary-button.outline{color:#fff; border-color:rgba(255,255,255,.55)}
.crew-line.crew-line--trio{--stage:clamp(220px,26vw,340px); --step:clamp(12px,1.6vw,22px); grid-template-columns:.8fr 1.3fr .8fr; max-width:620px; min-width:0}
.crew-line--trio .crew-line__fig{height:calc(var(--stage) * .86)}
.crew-line--trio .crew-line__fig img{height:calc(var(--h) * var(--stage) * .92); max-width:none}
.crew-line--trio .crew-line__member--host .crew-line__svc{color:var(--brand-secondary)}
@media (max-width:900px){ .crew-line.crew-line--trio{min-width:0; grid-template-columns:.8fr 1.3fr .8fr; --stage:clamp(200px,52vw,280px); --step:10px} .crew-line--trio .crew-line__svc{font-size:.84rem} }

.bchain{background:#fff; padding:clamp(56px,7vw,96px) 0}
.bchain__row{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(6px,1vw,14px); counter-reset:none}
.bchain__step{position:relative; margin:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 6px 18px; border-radius:20px; background:var(--cream)}
.bchain__step:not(:last-child)::after{content:"\2192"; position:absolute; right:calc(-1 * clamp(6px,1vw,14px) / 2 - 7px); top:42%; font-weight:800; color:var(--brand-secondary); z-index:1; font-size:1rem}
.bchain__num{font-family:var(--font-display); font-weight:800; font-size:.75rem; color:var(--text-color-04)}
.bchain__step img{height:clamp(56px,6vw,80px); width:auto}
.bchain__icon{display:grid; place-items:center; height:clamp(56px,6vw,80px); color:var(--brand-3)}
.bchain__icon svg{width:clamp(40px,4vw,52px); height:auto}
.bchain__step b{font-family:var(--font-display); font-size:.86rem; line-height:1.15; color:var(--primary)}
.bchain__step--here{background:var(--primary); box-shadow:0 20px 36px -18px rgba(0,40,107,.6); transform:translateY(-6px)}
.bchain__step--here b{color:#fff} .bchain__step--here .bchain__num{color:var(--brand-secondary)}
.bchain__step em{font-style:normal; font-family:var(--font-display); font-weight:800; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; background:var(--brand-secondary); color:var(--primary); padding:3px 8px; border-radius:999px}
@media (max-width:760px){
  .bchain__row{grid-template-columns:1fr 1fr 1fr; row-gap:12px}
  .bchain__step:first-child{grid-column:1 / -1; flex-direction:row; justify-content:center; gap:12px; transform:none}
  .bchain__step:not(:last-child)::after{display:none}
}

.bdec{background:var(--cream); padding:clamp(56px,7vw,96px) 0}
.bdec__grid{list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); max-width:1040px}
.bdec__tile{margin:0; background:#fff; border-radius:22px; padding:clamp(20px,2.4vw,30px); box-shadow:0 2px 4px rgba(0,40,107,.04), 0 18px 34px -24px rgba(0,40,107,.45); transition:transform .25s ease}
.bdec__tile:hover{transform:translateY(-4px) rotate(-.6deg)}
.bdec__num{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--primary); color:var(--brand-secondary); font-family:var(--font-display); font-weight:800; font-size:.95rem; margin-bottom:14px}
.bdec__tile h3{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--primary); margin:0 0 4px; text-transform:none}
.bdec__tile p{margin:0; color:var(--text-color-02); font-size:1rem}
@media (max-width:760px){ .bdec__grid{grid-template-columns:1fr 1fr} }

.bhave{background:var(--primary); color:#fff; padding:clamp(56px,7vw,96px) 0}
.bhave__grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,5vw,64px); align-items:center}
.bhave__h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.04; letter-spacing:-.025em; color:#fff; margin:0 0 16px}
.bhave__h2 em{font-style:normal; color:var(--brand-secondary)}
.bhave__p{margin:0 0 20px; font-size:1.1rem; line-height:1.55; color:rgba(255,255,255,.82); max-width:48ch}
.bhave__badge{display:inline-flex; align-items:baseline; gap:8px; margin:0; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display); font-weight:700; padding:10px 18px; border-radius:999px; transform:rotate(-2deg)}
.bhave__badge b{font-size:1.4rem; font-weight:800}
.bhave__card{background:#fff; color:var(--primary); border-radius:24px; padding:clamp(22px,3vw,32px); transform:rotate(1.5deg); box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.bhave__card h3{font-family:var(--font-display); font-weight:800; font-size:1.3rem; margin:0 0 14px; text-transform:none}
.bhave__card ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.bhave__card li{margin:0; display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.05rem; text-decoration:line-through; text-decoration-color:rgba(151,51,81,.5)}
.bhave__card li svg{width:18px; height:18px; color:#c0392b; flex:none}
@media (max-width:860px){ .bhave__grid{grid-template-columns:1fr} .bhave__card{transform:none} }

/* ---------- Social: what a good feed does ---------- */
.bs-does{background:var(--cream); padding:clamp(52px,6vw,88px) 0}
.bs-does__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px)}
.bs-does__tile{margin:0; background:#fff; border-radius:22px; padding:clamp(20px,2.4vw,28px); text-align:center; box-shadow:0 2px 4px rgba(0,40,107,.04), 0 18px 34px -24px rgba(0,40,107,.45); transition:transform .25s ease}
.bs-does__tile:hover{transform:translateY(-4px)}
.bs-does__icon{display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--brand-secondary); color:var(--primary); margin-bottom:12px}
.bs-does__icon svg{width:28px; height:28px}
.bs-does__tile h3{font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--primary); margin:0 0 4px; text-transform:none}
.bs-does__tile p{margin:0; font-size:.95rem; line-height:1.45; color:var(--text-color-02)}
@media (max-width:900px){ .bs-does__grid{grid-template-columns:1fr 1fr} }

/* ---------- Homepage work section on phones: one navy card ---------- */
@media (max-width:900px){
  .case-studies-section .csx-feature__grid{background:var(--primary); border-radius:26px; overflow:hidden; gap:0!important; box-shadow:0 30px 50px -30px rgba(0,40,107,.6)}
  .case-studies-section .csx-feature__shot{border-radius:0!important; aspect-ratio:16/10; margin:0}
  .case-studies-section .csx-feature__shot img{width:100%; height:100%; object-fit:cover}
  .case-studies-section .csx-feature__scrim{background:rgba(0,16,44,.35)}
  .case-studies-section .csx-tag{order:2; align-self:flex-start; margin:20px 20px 0; background:rgba(255,255,255,.12); color:#fff; font-size:.68rem}
  .case-studies-section .csx-feature__copy h3{order:3; margin:12px 20px 0!important; color:#fff; font-size:1.45rem; line-height:1.1}
  .case-studies-section .csx-feature__stats{order:4; display:grid!important; grid-template-columns:repeat(3,1fr); gap:0!important; margin:18px 20px 0!important; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15)}
  .case-studies-section .csx-stat-tile{background:none!important; border:0!important; box-shadow:none!important; padding:14px 6px!important; text-align:center}
  .case-studies-section .csx-stat-tile + .csx-stat-tile{border-left:1px solid rgba(255,255,255,.15)!important}
  .case-studies-section .csx-stat-tile strong{color:var(--brand-secondary)!important; font-size:1.3rem!important; display:block}
  .case-studies-section .csx-stat-tile span{color:rgba(255,255,255,.75)!important; font-size:.68rem!important; line-height:1.3; display:block}
  .case-studies-section .csx-feature__copy p{order:5; margin:16px 20px 0!important; color:rgba(255,255,255,.82); font-size:.98rem; line-height:1.55}
  .case-studies-section .csx-link{order:6; margin:18px 20px 22px; justify-content:center; background:var(--brand-secondary); color:var(--primary)!important; border:0; border-radius:12px; padding:14px 16px; font-weight:800; text-decoration:none}
  .case-studies-section .csx-link svg{stroke:var(--primary)}
}
.crew-line--trio .crew-line__member--host{order:0!important}

/* ---------- Service page heroes on phones: the owner snack stands clear ----------
   The decorative "Live dashboard" float card covered the mascot on small screens. */
@media (max-width:900px){
  .svc-hero__visual--mascot .svc-hero__floatcard{display:none}
  .svc-hero__visual--mascot .svc-hero__mascotpanel img{width:100%; max-height:100%; bottom:-2%}
}

/* ---------- Bre profile: made by Bre ---------- */
.bre-made{background:var(--cream); padding:clamp(56px,7vw,100px) 0; overflow-x:clip}
.bre-made__h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em; color:var(--primary); margin:0 0 12px}
.bre-made__h2 em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.bre-made__sub{margin:0; font-size:1.08rem; color:var(--text-color-02)}
.bre-made__row{display:flex; justify-content:center; align-items:center; gap:clamp(14px,3vw,44px)}
.bre-made__phone{margin:0; width:min(28vw,280px); flex:none}
.bre-made__phone:nth-child(1){transform:rotate(-6deg) translateY(20px)}
.bre-made__phone:nth-child(2){transform:scale(1.06); z-index:1}
.bre-made__phone:nth-child(3){transform:rotate(6deg) translateY(20px)}
.bre-made__phone .mini-phone__bg{object-position:center}
@media (max-width:640px){
  .bre-made__row{gap:0}
  .bre-made__phone{width:40vw}
  .bre-made__phone:nth-child(1){transform:rotate(-8deg) translateX(18%) translateY(18px)}
  .bre-made__phone:nth-child(3){transform:rotate(8deg) translateX(-18%) translateY(18px)}
}

/* round 13: bigger Shelly on the social hero; Bre byline on creator page */
.bs-hero__art > img.bs-hero__peek{height:clamp(300px,30vw,440px); left:calc(50% - clamp(300px,30vw,400px)); bottom:clamp(10px,2vw,30px); transform:rotate(-6deg)}
@media (max-width:860px){ .bs-hero__art > img.bs-hero__peek{height:clamp(160px,42vw,210px); left:-2%; bottom:0} }
.bs-creator__byline{display:flex; align-items:center; gap:14px; margin:0 0 20px}
.bs-creator__byline img{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:center 30%; border:3px solid var(--brand-secondary); flex:none}
.bs-creator__name{display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.8rem); line-height:1.05; color:#fff; text-decoration:none}
.bs-creator__title{display:block; margin-top:3px; font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-secondary)}
.bs-creator__byline .leader__li{width:42px; height:42px; margin-left:4px}

/* round 14: two-size H1 on the homepage hero */
.hero-scene--crew .hero-scene__title .hero-scene__big{display:block; font-size:1em; line-height:1}
.hero-scene--crew .hero-scene__title .hero-scene__small{display:block; margin-top:14px; font-size:.46em; line-height:1.25; font-weight:700; letter-spacing:-.005em; color:rgba(255,255,255,.92); text-wrap:pretty; text-transform:none; font-size:.44em}
.hero-scene--crew .hero-scene__title{font-size:clamp(2.6rem,4.6vw,4.6rem)}
@media (max-width:1023px){ .hero-scene--crew .hero-scene__title{font-size:clamp(2.3rem,8.4vw,3.2rem)} .hero-scene--crew .hero-scene__title .hero-scene__small{font-size:.5em} }
@media (max-width:1023px) and (max-height:520px){ .hero-scene--crew .hero-scene__title{font-size:clamp(1.6rem,4vw,2.2rem)} }

/* round 15: hero breathing room. Desktop: H1, button, then the paragraph set apart below */
@media (min-width:1024px){
  .hero-scene--crew .hero-scene__content{display:flex; flex-direction:column; align-items:flex-start}
  .hero-scene--crew .hero-scene__title{order:1; margin-bottom:28px}
  .hero-scene--crew .hero-scene__cta{order:2}
  .hero-scene--crew .hero-scene__text{order:3; margin:34px 0 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); font-size:.95rem; color:rgba(255,255,255,.72); max-width:42ch}
}
@media (max-width:1023px){ .hero-scene--crew .hero-scene__pic{margin-bottom:26px} .hero-scene--crew .hero-scene__text{margin-bottom:22px} }

/* round 16: phone hero reads left-aligned, and the paragraph becomes a row of service chips */
.hero-scene__chips{display:none}
@media (max-width:1023px){
  .hero-scene--crew{text-align:center}
  .hero-scene--crew .hero-scene__title{align-self:stretch}
  .hero-scene--crew .hero-scene__title .hero-scene__small{margin-top:12px}
  .hero-scene--crew .hero-scene__text{display:none}
  .hero-scene__chips{order:4; display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0}
  .hero-scene__chips li{margin:0; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-family:var(--font-display); font-weight:700; font-size:.85rem}
  .hero-scene--crew .hero-scene__cta{justify-content:flex-start}
  .hero-scene--crew .hero-scene__cta .primary-button{width:100%; justify-content:center}
}
@media (max-width:1023px){ .hero-scene--crew, .hero-scene--crew .hero-scene__title, .hero-scene--crew .hero-scene__title span{text-align:center!important} .hero-scene--crew .hero-scene__cta{justify-content:center!important} }

/* round 17: no hero paragraph; button sits right under the H1 on desktop */
@media (min-width:1024px){ .hero-scene--crew .hero-scene__title{margin-bottom:30px} }

/* round 18: hero proof row fills the space under the button */
.hero-proof{list-style:none; margin:clamp(30px,4vh,48px) 0 0; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.16); display:grid; grid-template-columns:repeat(3,auto); gap:clamp(18px,2.4vw,34px); align-items:start}
.hero-proof li{margin:0; display:flex; flex-direction:column; gap:6px; max-width:170px}
.hero-proof__big{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,2.2vw,2.1rem); line-height:1; color:#fff; white-space:nowrap}
.hero-proof__big i{font-style:normal; font-size:.5em; letter-spacing:1px; color:var(--brand-secondary); vertical-align:middle}
.hero-proof__lbl{font-size:.84rem; line-height:1.3; color:rgba(255,255,255,.72)}
.hero-proof__faces{display:flex; height:34px}
.hero-proof__faces img{width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:center 25%; border:2px solid #01286b; margin-left:-9px; background:#0a3a8a}
.hero-proof__faces img:first-child{margin-left:0}
.hero-proof__faces img.snack{object-fit:contain; object-position:center bottom; background:var(--brand-secondary); padding:3px 3px 0}
@media (max-width:1023px){
  .hero-proof{order:6; grid-template-columns:repeat(3,1fr); margin:0 0 clamp(30px,6vw,48px); padding-top:18px; gap:10px; text-align:center}
  .hero-proof li{max-width:none; align-items:center}
  .hero-proof__big{font-size:1.35rem}
  .hero-proof__lbl{font-size:.72rem}
  .hero-proof__faces{height:28px} .hero-proof__faces img{width:28px; height:28px; margin-left:-8px}
  .hero-scene--crew .hero-scene__cta{margin-bottom:22px!important}
}

/* round 18: creator split cards, balanced */
.bs-split__grid{align-items:stretch}
.bs-split__card{display:flex; flex-direction:column}
.bs-split__sub{margin:-8px 0 18px; color:var(--text-color-04); font-size:.98rem}
.bs-split__card:not(.bs-split__card--you) ul{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.bs-split__card:not(.bs-split__card--you) li{justify-content:flex-start; padding:12px 14px; font-size:1rem}
.bs-split__card--you{padding-right:clamp(170px,19vw,240px); overflow:hidden}
.bs-split__card--you ul{flex-direction:column; align-items:flex-start}
.bs-split__card--you img{height:clamp(200px,22vw,280px); right:clamp(8px,1.5vw,20px); bottom:-10px; filter:drop-shadow(0 16px 20px rgba(0,0,0,.35))}
.bs-split__card--you p{margin-top:auto; padding-top:16px}
@media (max-width:760px){
  .bs-split__card--you{padding-right:clamp(24px,3vw,38px); padding-bottom:200px}
  .bs-split__card--you img{height:190px; right:50%; transform:translateX(50%)}
}
@media (min-width:1024px){ .hero-scene--crew .hero-proof{order:3} }
.bs-split__card:not(.bs-split__card--you) li:last-child:nth-child(odd){grid-column:1 / -1}

/* round 19: crew personality. Hover a snack and it says its line (desktop) */
.crew-line__say{
  position:absolute; left:50%; bottom:calc(var(--h,.8) * var(--stage) * .8 + var(--d,0) * var(--step,0px) + 26px); transform:translate(-50%,8px) scale(.9);
  width:max-content; max-width:210px; padding:10px 14px; border-radius:16px 16px 16px 4px; background:#fff; color:var(--primary);
  font-family:var(--font-display); font-weight:700; font-size:.85rem; line-height:1.25; text-align:left;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45); opacity:0; pointer-events:none; z-index:40;
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.9,.25,1.2);
}
.crew-line__member{position:relative}
.crew-line__member a{position:relative}
.crew-line__member a:hover .crew-line__say, .crew-line__member a:focus-visible .crew-line__say{opacity:1; transform:translate(-50%,0) scale(1)}
.crew-line__member:first-child .crew-line__say{left:0; transform:translate(0,8px) scale(.9)}
.crew-line__member:first-child a:hover .crew-line__say{transform:translate(0,0) scale(1)}
.crew-line__member:last-child .crew-line__say{left:auto; right:0; transform:translate(0,8px) scale(.9); border-radius:16px 16px 4px 16px}
.crew-line__member:last-child a:hover .crew-line__say{transform:translate(0,0) scale(1)}
@media (hover:none), (max-width:900px){ .crew-line__say{display:none} }

/* round 19: hero crew explainer (third proof item) */
.hero-proof{max-width:500px; grid-template-columns:auto auto 1fr}
.hero-proof__crew a{display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none}
.hero-proof__crew .hero-proof__lbl b{display:block; color:var(--brand-secondary); font-family:var(--font-display); margin-top:2px}
.hero-proof__crew a:hover .hero-proof__lbl b{text-decoration:underline; text-underline-offset:3px}
@media (max-width:1023px){ .hero-proof{max-width:none; grid-template-columns:repeat(3,1fr)} }

/* round 19: Officer Ollie citation (Brand & Message) */
.citation{position:relative; padding-left:clamp(90px,11vw,150px)}
.citation__ollie{position:absolute; left:-10px; bottom:6px; width:clamp(130px,15vw,200px); height:auto; z-index:2; transform:rotate(-6deg); filter:drop-shadow(0 16px 20px rgba(0,0,0,.4))}
.citation__ticket{position:relative; background:#fffdf4; color:#1d2433; border-radius:6px; padding:18px 22px 16px; transform:rotate(2deg); box-shadow:0 30px 50px -28px rgba(0,0,0,.65); background-image:repeating-linear-gradient(transparent 0 27px, rgba(0,40,107,.07) 27px 28px); border-top:10px solid var(--brand-secondary)}
.citation__ticket::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px; background:radial-gradient(circle at 6px 0, transparent 5px, #fffdf4 5px) 0 0/12px 8px repeat-x}
.citation__head{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:800; color:#b3261e}
.citation__head b{color:var(--primary); letter-spacing:.06em}
.citation dl{margin:0; display:grid; gap:8px}
.citation dl div{display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:baseline}
.citation dt{font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6b6e6c}
.citation dd{margin:0; font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--primary)}
.citation__sign{margin:14px 0 0; padding-top:10px; border-top:1px dashed rgba(0,40,107,.25); font-family:"Brush Script MT","Segoe Script",cursive; font-size:1.5rem; color:var(--primary)}
.citation__sign small{display:block; font-family:var(--font-body); font-size:.72rem; color:#6b6e6c; letter-spacing:.04em}
.citation__note{margin:22px 0 0; color:rgba(255,255,255,.8); font-weight:600}
@media (max-width:860px){ .citation{padding-left:0; padding-top:120px} .citation__ollie{left:auto; right:6%; top:0; bottom:auto; width:150px} }

/* round 19: teaser post on /team/bre/ */
.bre-made__post{margin:0; width:min(26vw,270px); flex:none; background:#fff; padding:10px 10px 14px; border-radius:12px; box-shadow:0 30px 50px -28px rgba(0,40,107,.55); transform:rotate(-3deg)}
.bre-made__post img{width:100%; height:auto; display:block; border-radius:6px}
.bre-made__post figcaption{margin-top:8px; font-family:var(--font-display); font-weight:700; font-size:.82rem; color:var(--primary); text-align:center}
@media (max-width:900px){ .bre-made__row{flex-wrap:wrap} .bre-made__post{width:min(70vw,300px); margin:0 auto 26px; order:-1} }

/* round 19 fixes */
.hero-proof{max-width:450px; gap:clamp(16px,2vw,28px)}
.hero-proof__crew{max-width:132px}
@media (max-width:1023px){ .hero-proof__crew{max-width:none} }
.citation{display:grid; grid-template-columns:clamp(130px,14vw,180px) 1fr; column-gap:18px; align-items:end; padding-left:0}
.citation__ollie{position:static; width:100%; grid-row:1 / span 2; align-self:end; margin-bottom:-6px}
.citation__ticket{grid-column:2}
.citation__note{grid-column:2}
@media (max-width:860px){ .citation{grid-template-columns:110px 1fr; padding-top:0} .citation__ollie{position:static; width:110px} }
.bre-made__row .bre-made__phone:nth-child(2){transform:rotate(-5deg) translateY(16px)}
.bre-made__row .bre-made__phone:nth-child(3){transform:rotate(3deg) scale(1.04); z-index:1}
.bre-made__row .bre-made__phone:nth-child(4){transform:rotate(6deg) translateY(16px)}
.bre-made__row .bre-made__phone{width:min(22vw,250px)}
@media (max-width:640px){
  .bre-made__row .bre-made__phone{width:31vw}
  .bre-made__row .bre-made__phone:nth-child(2){transform:rotate(-7deg) translateX(12%) translateY(14px)}
  .bre-made__row .bre-made__phone:nth-child(4){transform:rotate(7deg) translateX(-12%) translateY(14px)}
}

/* round 19 fixes, pass 2 */
.hero-proof{grid-template-columns:auto 1fr; max-width:460px}
.hero-proof__crew{grid-column:1 / -1; max-width:none}
.hero-proof__crew a{flex-direction:row; align-items:center; gap:12px}
.hero-proof__crew .hero-proof__lbl b{display:inline; margin:0 0 0 4px}
@media (max-width:1023px){
  .hero-proof{grid-template-columns:1fr 1fr; max-width:420px; margin-left:auto; margin-right:auto}
  .hero-proof__crew a{justify-content:center}
}
@media (max-width:860px){
  .citation{grid-template-columns:1fr}
  .citation__ollie{grid-row:auto; width:120px; margin:0 0 -18px 8px; position:relative; z-index:3}
  .citation__ticket, .citation__note{grid-column:1}
}
@media (max-width:640px){
  .bre-made__row{flex-wrap:wrap; justify-content:center; gap:10px}
  .bre-made__post{width:min(78vw,320px); flex-basis:100%; max-width:320px; margin:0 auto 18px}
  .bre-made__row .bre-made__phone{width:28vw}
  .bre-made__row .bre-made__phone:nth-child(2){transform:rotate(-5deg) translateY(10px)}
  .bre-made__row .bre-made__phone:nth-child(3){transform:none}
  .bre-made__row .bre-made__phone:nth-child(4){transform:rotate(5deg) translateY(10px)}
}
.hero-proof li.hero-proof__crew{max-width:none}
@media (max-width:640px){ .bre-made__row{gap:6px} .bre-made__row .bre-made__phone{width:25vw} }
@media (max-width:640px){ .bre-made__row .mini-phone{border-width:4px; border-radius:22px} .bre-made__row .mini-phone::before{height:10px; top:5px} }
/* round 20: Mo's bubble clears his beanie and sits on two lines */
.crew-line__member--host .crew-line__say{bottom:calc(var(--h,.8) * var(--stage) * .8 + var(--d,0) * var(--step,0px) + 70px); max-width:250px}
/* round 21: bubbles sit higher so they never touch a face */
.crew-line__say{bottom:calc(var(--h,.8) * var(--stage) * .8 + var(--d,0) * var(--step,0px) + 64px)}
.crew-line__member--host .crew-line__say{bottom:calc(var(--h,.8) * var(--stage) * .8 + var(--d,0) * var(--step,0px) + 96px)}
/* round 22: Officer Ollie, much bigger */
.citation{grid-template-columns:clamp(210px,22vw,300px) 1fr; column-gap:10px}
.citation__ollie{margin-bottom:-24px; transform:rotate(-5deg)}
@media (max-width:860px){ .citation{grid-template-columns:1fr} .citation__ollie{width:200px; margin:0 0 -30px 0} }
@media (min-width:861px){ .bhave__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr)} .citation__ticket{min-width:300px} }

/* round 23: P&L clarity on Brand & Message */
.pl-preview__h2 em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.pl-get{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.pl-get li{margin:0; display:flex; gap:10px; align-items:baseline; color:var(--text-color-02); font-size:1.02rem}
.pl-get li::before{content:"\2713"; color:var(--primary); font-weight:800; background:var(--brand-secondary); width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:.75rem; flex:none; transform:translateY(3px)}
.pl-get li b{color:var(--primary); font-family:var(--font-display)}
.pl-get__fine{margin:12px 0 0; font-size:.92rem; color:var(--text-color-04)}

/* round 23: Officer Ollie centred on his citation */
.citation{display:flex; flex-direction:column; align-items:center; max-width:440px; margin-left:auto}
.citation__ollie{position:relative; z-index:3; width:clamp(200px,20vw,260px); margin:0 0 -54px; transform:none; filter:drop-shadow(0 18px 22px rgba(0,0,0,.4))}
.citation__ticket{width:100%; min-width:0; transform:rotate(1.5deg)}
.citation__ticket{padding-top:48px}
.citation__note{text-align:center}
@media (max-width:860px){ .citation{margin:0 auto} .citation__ollie{width:190px; margin-bottom:-46px} }

/* round 23: phone spacing, work section and above leaders */
@media (max-width:900px){
  .case-studies-section{padding-top:48px!important; padding-bottom:36px!important}
  .case-studies-section .section-header{margin-bottom:18px!important}
  .case-studies-section .csx-feature__grid{margin-top:0!important}
  .case-studies-section .center{margin-top:22px!important}
  .leaders{padding-top:36px}
  .leaders__head{margin-bottom:22px}
}
.pl-get li{display:block; position:relative; padding-left:32px}
.pl-get li::before{position:absolute; left:0; top:1px; transform:none}

/* ---------- Marketing Playbook page: two sides ---------- */
.pb-areas{background:var(--cream); padding:clamp(56px,7vw,100px) 0}
.pb-areas__head{text-align:center; margin:0 auto clamp(28px,4vw,48px)}
.pb-areas__h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.03; letter-spacing:-.025em; color:var(--primary); margin:0}
.pb-areas__h2 em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}
.pb-areas__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); align-items:start}
.pb-side{background:#fff; border-radius:26px; padding:clamp(22px,2.8vw,34px); box-shadow:0 2px 4px rgba(0,40,107,.05), 0 24px 44px -28px rgba(0,40,107,.45)}
.pb-side--bre{background:var(--primary); color:#fff}
.pb-side__head{display:flex; align-items:center; gap:14px; padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid rgba(0,40,107,.1)}
.pb-side--bre .pb-side__head{border-bottom-color:rgba(255,255,255,.15)}
.pb-side__head img{width:58px; height:58px; border-radius:50%; object-fit:cover; object-position:center 28%; border:3px solid var(--brand-secondary); flex:none}
.pb-side__kicker{margin:0 0 3px; font-family:var(--font-display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-color-04)}
.pb-side--bre .pb-side__kicker{color:var(--brand-secondary)}
.pb-side__h{margin:0; font-family:var(--font-display); font-weight:800; font-size:clamp(1.25rem,1.9vw,1.55rem); line-height:1.1; color:var(--primary); text-transform:none}
.pb-side--bre .pb-side__h{color:#fff}
.pb-side__list{list-style:none; margin:0; padding:0}
.pb-area{margin:0; display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(0,40,107,.07)}
.pb-side--bre .pb-area{border-bottom-color:rgba(255,255,255,.1)}
.pb-area:last-child{border-bottom:0; padding-bottom:0}
.pb-area img{width:46px; height:46px; object-fit:contain; object-position:center bottom; flex:none; background:var(--cream); border-radius:14px; padding:4px 4px 0}
.pb-side--bre .pb-area img{background:rgba(255,255,255,.1)}
.pb-area h3{margin:2px 0 3px; font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--primary); text-transform:none}
.pb-side--bre .pb-area h3{color:#fff}
.pb-area p{margin:0; font-size:.93rem; line-height:1.45; color:var(--text-color-02)}
.pb-side--bre .pb-area p{color:rgba(255,255,255,.78)}
@media (max-width:860px){ .pb-areas__grid{grid-template-columns:1fr} }

/* homepage + location band headline accent */
.pl-band h2 em{font-style:normal; background:linear-gradient(transparent 62%, var(--brand-secondary) 62%)}

/* ---------- round 25: mascots, and the humans who run each service ---------- */
.crew-band__title span, .crew-hub__title span{display:block}
.svc-panel__who--human{display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; text-transform:none; letter-spacing:0; font-size:.8rem}
.svc-panel__who--human img{width:22px; height:22px; border-radius:50%; object-fit:cover; object-position:center 25%}
.svc-hero__human, .bs-hero__human{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--primary); font-family:var(--font-display); font-weight:700; font-size:.85rem; padding:5px 14px 5px 5px; border-radius:999px; box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.svc-hero__human{position:absolute; z-index:5; left:16px; top:16px}
.svc-hero__human img, .bs-hero__human img{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:center 25%}
.bs-hero__human{margin:0 0 22px}

/* About hero: Joe, Bre, and Mo on the right; stacks under the copy on phones */
.hero-scene--about{background:#00286b}
.hero-scene--about .hero-scene__img{object-position:right bottom!important}
.hero-scene--about .hero-scene__scrim{background:linear-gradient(90deg,rgba(0,40,107,.95) 0%,rgba(0,40,107,.75) 32%,rgba(0,40,107,0) 55%)}
@media (min-width:901px){ .hero-scene--about{min-height:min(64vh,620px)} .hero-scene--about .hero-scene__content{max-width:560px} }
@media (max-width:900px){
  .hero-scene--about{display:flex; flex-direction:column; min-height:0}
  .hero-scene--about .hero-scene__pic{position:static; order:2}
  .hero-scene--about .hero-scene__img{position:static; width:100%; height:auto}
  .hero-scene--about .hero-scene__scrim{display:none}
  .hero-scene--about .hero-scene__inner{order:1; padding-bottom:10px!important}
}
.svc-hero__mascotpanel .svc-hero__human img{position:static; left:auto; bottom:auto; transform:none; width:30px; height:30px; max-height:none; filter:none; z-index:auto}
.svc-hero__mascotpanel .svc-hero__human span{white-space:nowrap}
@media (min-width:901px){ .hero-scene--about .hero-scene__img{object-fit:contain!important; height:100%!important; top:0; bottom:0} .hero-scene--about .hero-scene__pic{top:clamp(60px,8vh,90px)} }

/* round 26: Joe + Bre faces around "Real people do the work." */
.crew-band__humans{display:inline-flex!important; align-items:center; justify-content:center; gap:.45em}
.crew-face{width:2.1em; height:2.1em; border-radius:50%; object-fit:cover; object-position:center 25%; border:2px solid var(--brand-secondary); flex:none}

/* round 26: Poppy up into the empty right side of "You approve" on phones */
@media (max-width:760px){
  .bs-split__card--you{padding-right:clamp(130px,38vw,170px); padding-bottom:clamp(24px,3vw,38px)}
  .bs-split__card--you img{right:6px; left:auto; top:50%; bottom:auto; transform:translateY(-50%); height:clamp(150px,44vw,190px)}
}

/* round 27: contact + book pages show both of us */
.contact-duo{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0}
.contact-duo__faces{display:flex}
.contact-duo__faces img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:center 25%; border:3px solid #fff; box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.contact-duo__faces img + img{margin-left:-14px}
.contact-duo__links{display:flex; gap:8px; margin-left:auto}
.contact-duo__li{width:38px!important; height:38px!important}
.book-avatars{display:flex; justify-content:center}
.book-avatars .book-avatar + .book-avatar{margin-left:-22px}
.book-avatars .book-avatar{border:4px solid #fff; object-position:center 25%}

/* round 27: Poppy closer to the list; "Nothing posts without your yes" centred */
.bs-split__card--you p{text-align:center; width:100%}
@media (max-width:760px){
  .bs-split__card--you{padding-right:clamp(24px,3vw,38px)}
  .bs-split__card--you ul{max-width:62%}
  .bs-split__card--you img{right:auto; left:58%; top:42%; height:clamp(140px,40vw,175px)}
  .bs-split__card--you p{margin-top:22px}
}
.book-avatars .book-avatar{margin:0 0 14px!important; display:block}
.book-avatars .book-avatar + .book-avatar{margin-left:-22px!important}

/* round 28: labelled LinkedIn pills on /contact/ */
.contact-duo__links{flex-wrap:wrap}
.contact-li{display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 4px; border-radius:999px; background:#0A66C2; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.85rem; text-decoration:none; box-shadow:0 8px 18px -10px rgba(10,102,194,.8); transition:transform .2s ease}
.contact-li:hover{transform:translateY(-2px)}
.contact-li img{width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:center 25%; border:2px solid #fff}
.contact-li svg{width:15px; height:15px}
@media (max-width:560px){ .contact-duo__links{margin-left:0; width:100%} }

/* round 29 (Joe x Bre, Sept 16): no ROAS claim; real Google G linked to our profile, crew link beside it */
.hero-proof{display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:none}
.hero-proof li{max-width:none}
.hero-proof__crew{grid-column:auto}
.hero-proof__google a{display:inline-flex; align-items:center; gap:12px; padding:9px 18px 9px 10px; background:#fff; border-radius:999px; color:var(--primary); text-decoration:none; box-shadow:0 12px 26px -14px rgba(0,0,0,.6); transition:transform .2s ease}
.hero-proof__google a:hover{transform:translateY(-2px)}
.hero-proof__g{width:30px; height:30px; flex:none}
.hero-proof__google .hero-proof__big{color:var(--primary); font-size:1.45rem}
.hero-proof__google .hero-proof__big i{font-size:.62em; color:#FBBC04}
@media (max-width:1023px){
  .hero-proof{align-items:center}
  .hero-proof__google .hero-proof__big{font-size:1.3rem}
}

/* round 29: homepage closing CTA is a compact strip, not a full-height section */
.final-cta--compact{padding:clamp(34px,4vw,50px) 0}
.final-cta--compact .final-cta__inner{max-width:1040px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(18px,3vw,40px); text-align:left}
.final-cta--compact .final-cta__smiley{height:96px; margin:0}
.final-cta--compact h2{font-size:clamp(1.8rem,3vw,2.5rem); margin:0 0 6px}
.final-cta--compact p{font-size:1rem; margin:0; max-width:52ch}
@media (max-width:760px){
  .final-cta--compact .final-cta__inner{grid-template-columns:auto 1fr; text-align:left}
  .final-cta--compact .final-cta__smiley{height:78px}
  .final-cta--compact .primary-button{grid-column:1 / -1; justify-content:center}
}
/* round 29: the proof laptop is now a link (spans inside an <a>) */
a.laptop{display:block; text-decoration:none; color:inherit; transition:transform .3s ease}
a.laptop .laptop__screen, a.laptop .laptop__chrome, a.laptop .laptop__base{display:block}
a.laptop .laptop__chrome{display:flex}
a.laptop:hover{transform:rotate(0deg) translateY(-3px)}

/* round 29: services hub = nine matching panels (Joe: no "who runs it", no numbers, same look for every service) */
@media (min-width:1100px){
  .svc-panels__grid{grid-template-columns:repeat(3,1fr)}
  .svc-panel__art{max-width:42%; height:78%}
  .svc-panel__body{max-width:62%}
  .svc-panel__title{font-size:clamp(1.45rem,1.9vw,1.85rem)}
  .svc-panel__chat{width:44%; max-width:44%; font-size:.8rem}
}
.crew-hub__title .crew-band__humans{font-size:1em; margin-top:0; color:inherit}

/* round 29: social "Search changed" shows Joe + Bre together on two phones */
.bs-why2__photo--duo{min-height:clamp(400px,42vw,520px); align-self:center; padding-bottom:clamp(30px,4vw,60px)}
.bs-why2__photo--duo .bs-why2__disc{bottom:auto; top:50%; transform:translate(-50%,-50%); width:min(96%,440px)}
.bs-why2__photo--duo .mini-phone{position:absolute; z-index:1; width:clamp(170px,19vw,230px)}
.bs-why2__photo--duo .mini-phone__bg{object-position:center}
.bs-duo__back{left:8%; top:4%; transform:rotate(-8deg)}
.bs-duo__front{right:8%; top:14%; transform:rotate(5deg); z-index:2!important}
.bs-why2__photo--duo .bs-why2__tag{right:auto; left:50%; bottom:2%; transform:translateX(-50%) rotate(-3deg); white-space:nowrap; z-index:3}
@media (max-width:900px){
  .bs-why2__photo--duo{min-height:420px; margin:0 auto; width:min(100%,420px)}
  .bs-why2__photo--duo .mini-phone{width:clamp(160px,44vw,200px)}
  .bs-duo__back{left:4%} .bs-duo__front{right:4%}
}

/* round 29: /team/bre/ Ollie photo strip */
.bre-ollie{background:#fff; padding:clamp(48px,6vw,84px) 0}
.bre-ollie__strip{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,26px); max-width:980px; margin:0 auto}
.bre-ollie__strip figure{margin:0; background:#fff; padding:10px 10px 14px; border-radius:6px; box-shadow:0 20px 40px -24px rgba(0,40,107,.5); transition:transform .3s ease}
.bre-ollie__strip figure:nth-child(1){transform:rotate(-3deg)}
.bre-ollie__strip figure:nth-child(2){transform:rotate(1.5deg) translateY(10px)}
.bre-ollie__strip figure:nth-child(3){transform:rotate(-1deg)}
.bre-ollie__strip figure:hover{transform:rotate(0) translateY(-4px)}
.bre-ollie__strip img{display:block; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:3px}
.bre-ollie__strip figcaption{margin-top:10px; text-align:center; font-family:var(--font-display); font-weight:700; color:var(--primary); font-size:clamp(.8rem,1.4vw,1rem)}
@media (max-width:640px){ .bre-ollie__strip{gap:8px} .bre-ollie__strip figure{padding:5px 5px 8px} .bre-ollie__strip figcaption{font-size:.68rem; margin-top:6px} }
@media (max-width:760px){ .final-cta--compact h2{font-size:1.7rem} .final-cta--compact p{font-size:.95rem} }
.bs-why2__photo--duo img.mini-phone__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center}
.bs-why2:has(.bs-why2__photo--duo){padding-bottom:clamp(40px,5vw,80px)}
.bs-duo__back .mini-phone__cap{bottom:44px}
.bs-duo__front .mini-phone__cap{display:none}
.crew-hub__title .crew-band__humans{display:flex!important; margin-top:10px}
@media (min-width:1100px){
  .svc-panel__chat{bottom:7%; right:4%; width:40%; max-width:40%; gap:6px}
  .svc-panel__chat .svc-chat{font-size:.74rem; padding:7px 10px}
}
.bs-why2__photo--duo .mini-phone__cap, .bs-duo__back .mini-phone__rail{display:none}
.bs-why2__photo--duo .mini-phone--reel::after{background:linear-gradient(transparent 70%, rgba(0,0,0,.35))}
@media (min-width:1100px){
  .svc-panel__chat{top:auto!important; bottom:18px!important; right:18px}
  .svc-panel__chat .svc-chat--them:first-child{display:none}
}
@media (min-width:1100px){ .svc-panel__chat{height:auto!important; justify-content:flex-end} }

/* round 30: /audit/ areas = one team, one grid */
.pb-areas__duo{display:inline-flex; align-items:center; gap:12px; margin:18px 0 0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--primary)}
.pb-areas__faces{display:flex}
.pb-areas__faces img{width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 25%; border:3px solid #fff; box-shadow:0 6px 14px -6px rgba(0,40,107,.4)}
.pb-areas__faces img + img{margin-left:-12px}
.pb-grid{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,18px)}
.pb-grid .pb-area{flex:0 1 calc((100% - 2*clamp(12px,1.6vw,18px))/3); background:#fff; border:0; border-radius:20px; padding:18px 20px; box-shadow:0 2px 4px rgba(0,40,107,.05), 0 18px 34px -24px rgba(0,40,107,.4)}
.pb-grid .pb-area:last-child{padding-bottom:18px}
@media (max-width:980px){ .pb-grid .pb-area{flex-basis:calc((100% - clamp(12px,1.6vw,18px))/2)} }
@media (max-width:620px){ .pb-grid .pb-area{flex-basis:100%} .pb-areas__duo{font-size:.95rem} }
/* round 30: hub subhead = two stacked lines, faces centred on either side */
.crew-hub__title .hub-humans{display:flex!important; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,22px); margin-top:14px; font-size:.46em}
.crew-hub__title .hub-humans__lines{display:flex; flex-direction:column; gap:.2em; margin:0; font-size:1em}
.crew-hub__title .hub-humans__lines span{display:block; margin:0; font-size:1em; color:var(--brand-3)}
.crew-hub__title .hub-humans .crew-face{width:2.6em; height:2.6em}

/* round 30: panels v2. Mascot stands in a tinted header zone (bigger, pops above the card);
   links sit below on white at full width, so arrows never touch a mascot. */
.svc-panels__grid{row-gap:clamp(56px,5vw,70px); padding-top:40px}
.svc-panel.svc-panel--v2{overflow:visible; padding:0; min-height:0; display:flex; flex-direction:column}
.svc-panel--v2 .svc-panel__top{position:relative; background:linear-gradient(180deg,#EEF3FB,#E3EBF8); border-radius:28px 28px 0 0; padding:clamp(22px,2.4vw,30px); padding-right:46%; min-height:170px; display:flex; align-items:flex-end}
.svc-panel--v2 .svc-panel__heading{position:relative; z-index:1}
.svc-panel--v2 .svc-panel__title{max-width:none; font-size:clamp(1.45rem,1.9vw,1.85rem)}
.svc-panel--v2 .svc-panel__tag{max-width:none; margin:0}
.svc-panel--v2 img.svc-panel__art{position:absolute; top:auto!important; bottom:0!important; right:clamp(10px,1.4vw,20px); left:auto; height:215px!important; width:auto; max-width:48%!important; object-fit:contain; object-position:center bottom; transform:rotate(-3deg); transform-origin:bottom center; filter:drop-shadow(0 14px 16px rgba(0,40,107,.22))}
.svc-panel--v2:hover img.svc-panel__art{transform:rotate(0deg) translateY(-6px) scale(1.05)}
.svc-panel--v2 .svc-panel__body{max-width:none!important; padding:clamp(10px,1.4vw,16px) clamp(22px,2.4vw,30px) clamp(20px,2.4vw,28px)}
.svc-panel--v2 .svc-panel__links a:last-child{border-bottom:0}
.svc-panel--v2 .svc-panel__chat{display:flex!important; position:absolute; top:auto!important; bottom:18px!important; right:14px!important; width:44%!important; max-width:44%!important; height:auto!important; gap:6px; transform:rotate(-3deg)}
.svc-panel--v2 .svc-panel__chat .svc-chat{font-size:.74rem; padding:7px 10px}
.svc-panel--v2 .svc-panel__chat .svc-chat--them:first-child{display:block}
@media (min-width:1100px){ .svc-panels__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){
  .svc-panels__grid{grid-template-columns:1fr; row-gap:58px}
  .svc-panel--v2 .svc-panel__top{min-height:150px; padding-right:44%}
  .svc-panel--v2 img.svc-panel__art{height:190px!important}
}
@media (max-width:600px){
  .crew-hub__title .hub-humans{font-size:.4em}
  .crew-hub__title .hub-humans .crew-face{width:2.4em; height:2.4em}
}

/* round 30: social "Search changed" = two photo phones + a front phone playing the horizontal crew reveal reel */
.bs-why2__photo--duo .bs-duo__left{left:2%; top:2%; transform:rotate(-9deg)}
.bs-why2__photo--duo .bs-duo__right{right:2%; top:6%; transform:rotate(8deg)}
.bs-why2__photo--duo .bs-duo__left img.mini-phone__bg, .bs-why2__photo--duo .bs-duo__right img.mini-phone__bg{top:30px; height:calc(100% - 30px); object-position:center top}
.bs-why2__photo--duo .mini-phone--reel{background:#1b1b1d}
.bs-why2__photo--duo .bs-duo__reel{left:50%; top:16%; transform:translateX(-50%); z-index:3!important; background:#000; display:flex; align-items:center; box-shadow:0 40px 70px -24px rgba(0,20,60,.65)}
.bs-duo__video{display:block; width:100%; height:auto; position:relative; z-index:1}
.bs-duo__reel .mini-phone__rail{z-index:2}
.bs-duo__cap{position:absolute; z-index:2; left:12px; right:50px; bottom:18px; color:#fff; font-size:12px; line-height:1.35}
.bs-duo__cap b{display:block; font-size:12.5px}
.bs-why2__photo--duo .bs-why2__tag{bottom:-2%}
@media (max-width:900px){
  .bs-why2__photo--duo .mini-phone{width:clamp(140px,38vw,190px)}
  .bs-why2__photo--duo{min-height:460px}
}
/* landscape reel phone in front, portrait phones behind */
.bs-why2__photo--duo{min-height:clamp(470px,44vw,580px)}
.bs-why2__photo--duo .bs-duo__left, .bs-why2__photo--duo .bs-duo__right{width:clamp(170px,16vw,215px)}
.bs-why2__photo--duo .bs-duo__left{left:6%; top:0}
.bs-why2__photo--duo .bs-duo__right{right:6%; top:18px}
.bs-duo__left img.mini-phone__bg{object-position:25% 85%!important}
.bs-why2__photo--duo .bs-duo__reel--land{width:clamp(330px,33vw,440px)!important; aspect-ratio:18.5/9; top:auto; bottom:44px; left:50%; transform:translateX(-50%) rotate(-2deg); border-radius:30px; border-width:7px}
.bs-duo__reel--land::before{top:50%; left:8px; transform:translateY(-50%); width:16px; height:30%}
.bs-duo__reel--land .bs-duo__video{width:auto; height:100%; margin:0 auto}
.bs-duo__reel--land .mini-phone__rail{right:12px; bottom:auto; top:50%; transform:translateY(-50%); gap:10px}
.bs-duo__reel--land .mini-phone__rail svg{width:18px; height:18px}
.bs-duo__reel--land .bs-duo__cap{left:auto; right:44px; bottom:10px; text-align:right; font-size:11px; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bs-duo__reel--land .bs-duo__cap b{font-size:11px}
.bs-why2__photo--duo .bs-why2__tag{bottom:0}
@media (max-width:900px){
  .bs-why2__photo--duo{min-height:430px}
  .bs-why2__photo--duo .bs-duo__left, .bs-why2__photo--duo .bs-duo__right{width:clamp(135px,38vw,170px)}
  .bs-why2__photo--duo .bs-duo__left{left:2%} .bs-why2__photo--duo .bs-duo__right{right:2%}
  .bs-why2__photo--duo .bs-duo__reel--land{width:min(92%,340px)!important; bottom:48px}
}
.bs-duo__right img.mini-phone__bg{object-position:62% 78%!important}
.bs-duo__reel--land .bs-duo__cap{display:none}

/* round 30: homepage work section, no dead gap under the heading */
.case-studies-section .section-header{margin-bottom:clamp(20px,2.4vw,30px)}
.csx-feature__grid--home{align-items:start; margin-top:0}
.csx-feature__grid--home .csx-feature__copy{padding-top:clamp(4px,1vw,14px)}

/* round 30: "breaks one of two ways" at about two-thirds the size */
.breaks--compact{padding:clamp(44px,5vw,72px) 0}
.breaks--compact .breaks__title{font-size:clamp(1.7rem,3vw,2.5rem); max-width:22ch; margin-bottom:clamp(20px,2.6vw,34px)}
.breaks--compact .breaks__row{max-width:940px; grid-template-columns:minmax(0,1fr) minmax(170px,.62fr) minmax(0,1fr)}
.breaks--compact .breaks__card{padding:clamp(20px,2.2vw,28px)}
.breaks--compact .breaks__card h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
.breaks--compact .breaks__card p{font-size:.98rem}
.breaks--compact .breaks__mo{min-height:clamp(180px,17vw,220px)}
.breaks--compact .breaks__mo img{height:clamp(170px,16vw,210px)}
.breaks--compact .breaks__or{width:42px; height:42px; font-size:.95rem}
.breaks--compact .breaks__foot{margin-top:clamp(22px,3vw,34px)}
.breaks--compact .breaks__foot p{font-size:clamp(1.05rem,1.5vw,1.25rem)}
@media (max-width:900px){
  .breaks--compact .breaks__row{grid-template-columns:1fr; max-width:420px}
  .breaks--compact .breaks__mo{min-height:170px} .breaks--compact .breaks__mo img{height:160px}
  .breaks--compact .breaks__disc{width:160px} .breaks--compact .breaks__or{right:calc(50% - 100px)}
}
/* round 30: Ollie strip carries Bre's point of view */
.bre-ollie .bre-gallery__head{text-align:center}
.bre-ollie__strip figcaption{text-align:left; padding:4px 6px 2px}
.bre-ollie__strip figcaption b{display:block; font-size:clamp(1rem,1.5vw,1.2rem); margin-bottom:4px}
.bre-ollie__strip figcaption span{display:block; font-family:var(--font-body,inherit); font-weight:400; font-size:.94rem; line-height:1.45; color:var(--text-color-02)}
@media (max-width:760px){
  .bre-ollie__strip{grid-template-columns:1fr; max-width:360px; gap:22px}
  .bre-ollie__strip figure:nth-child(n){transform:rotate(-1.5deg)}
  .bre-ollie__strip figure:nth-child(2){transform:rotate(1.5deg)}
  .bre-ollie__strip figure{padding:10px 10px 14px}
  .bre-ollie__strip img{aspect-ratio:4/3.4; object-position:center 30%}
  .bre-ollie__strip figcaption b{font-size:1.1rem} .bre-ollie__strip figcaption span{font-size:.95rem}
}

/* round 31: homepage work section spacing */
.case-studies-section{padding:clamp(56px,6vw,90px) 0 clamp(36px,4vw,56px)!important}
.case-studies-section .section-header{margin-bottom:clamp(30px,3.4vw,44px)!important}
.case-studies-section .section-caption{margin:0 0 12px}
.case-studies-section .case-studies-heading{margin:0}
.csx-feature__grid--home .csx-feature__copy{padding-top:0}
.csx-feature__grid--home .csx-feature__copy h3{margin:18px 0 18px}
.csx-feature__grid--home + .center{margin-top:clamp(28px,3vw,40px)!important}
.leaders{padding-top:clamp(44px,5vw,72px)}
.bs-duo__left img.mini-phone__bg, .bs-duo__right img.mini-phone__bg{object-position:center center!important}
@media (max-width:760px){
  #followup.svc-panel--v2 .svc-panel__top{padding-right:50%; min-height:150px}
  #followup.svc-panel--v2 .svc-panel__chat{width:44%!important; max-width:44%!important; right:12px!important; bottom:14px!important}
  #followup.svc-panel--v2 .svc-panel__chat .svc-chat--them:first-child{display:none}
  #followup.svc-panel--v2 .svc-panel__chat .svc-chat{font-size:.7rem; padding:6px 9px}
}

/* round 32: /team/ hero plays the crew reveal on a sideways phone */
.tm-reel{display:block; width:min(100%,520px); margin:clamp(28px,3.5vw,44px) auto 0; text-decoration:none}
.tm-reel__phone{position:relative; display:flex; align-items:center; aspect-ratio:18.5/9; background:#000; border:8px solid #0d0d0f; border-radius:34px; overflow:hidden; transform:rotate(-2deg); box-shadow:0 40px 70px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); transition:transform .4s cubic-bezier(.2,.9,.25,1.2)}
.tm-reel:hover .tm-reel__phone{transform:rotate(0deg) scale(1.02)}
.tm-reel__phone::before{content:""; position:absolute; z-index:3; left:9px; top:50%; transform:translateY(-50%); width:17px; height:30%; background:#0d0d0f; border-radius:999px}
.tm-reel__phone img{display:block; height:100%; width:auto; margin:0 auto}
.tm-reel__phone .mini-phone__rail{position:absolute; z-index:2; right:14px; top:50%; bottom:auto; transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; color:#fff}
.tm-reel__phone .mini-phone__rail svg{width:19px; height:19px}
@media (max-width:560px){ .tm-reel__phone{border-width:6px; border-radius:26px} .tm-reel__phone .mini-phone__rail{right:9px; gap:8px} .tm-reel__phone .mini-phone__rail svg{width:15px; height:15px} }

/* round 33: phones. Favorite snack moves out of the photo into the facts list, small */
.tm-person__snackfact{display:none!important}
@media (max-width:760px){
  .tm-person__snack{display:none}
  .tm-person__body{padding-top:16px}
  .tm-person__snackfact{display:flex!important}
  .tm-person__snackfact em{font-style:normal; display:inline-flex; align-items:center; gap:5px}
  .tm-person__snackfact img{width:20px; height:20px; object-fit:contain; flex:none}
}
/* round 33: Ollie strip on phones shows Bre's face and all of Ollie */
@media (max-width:760px){ .bre-ollie__strip img{aspect-ratio:1/1; object-position:center 66%} }

/* round 34: creator partnerships page, one team + more to see */
.cp-flow{background:#fff}
.cp-flow__row{grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1180px}
.cp-flow .bs-phones__item:nth-child(1) .mini-phone{transform:rotate(-4deg)}
.cp-flow .bs-phones__item:nth-child(2) .mini-phone{transform:rotate(2deg)}
.cp-flow .bs-phones__item:nth-child(3) .mini-phone{transform:rotate(-2deg)}
.cp-flow .bs-phones__item:nth-child(4) .mini-phone{transform:rotate(4deg)}
.cp-flow .mini-phone{width:min(100%,220px)}
.cp-row{display:flex; align-items:center; gap:8px; margin:0; padding:11px 12px; border-bottom:1px solid #f0f0f0; font-size:11px; line-height:1.25}
.cp-row i{flex:none; width:30px; height:30px; border-radius:50%; background:var(--c); display:grid; place-items:center; font-style:normal; font-weight:800; font-size:10px; color:#00286B}
.cp-row span{flex:1; color:#666} .cp-row b{display:block; color:#111; font-size:11.5px}
.cp-row em{flex:none; width:20px; height:20px; border-radius:50%; background:#2FB463; color:#fff; display:grid; place-items:center; font-style:normal}
.cp-row em svg{width:12px; height:12px}
.cp-row--no{opacity:.55} .cp-row--no em{background:#C8CDD6; font-size:14px; line-height:1}
.cp-approve__post{position:relative; margin:12px; aspect-ratio:1; border-radius:12px; background:linear-gradient(160deg,#CDE7E8,#92CACD); display:grid; place-items:end center; overflow:hidden}
.cp-approve__post img{height:84%; width:auto; filter:drop-shadow(0 10px 12px rgba(0,40,107,.25))}
.cp-approve__post span{position:absolute; left:8px; top:8px; background:rgba(255,255,255,.9); border-radius:999px; padding:3px 8px; font-size:9.5px; font-weight:700}
.cp-approve__cap{margin:0 12px; font-size:11px; line-height:1.35; color:#333}
.cp-approve__btns{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:12px}
.cp-approve__btns span{display:grid; place-items:center; padding:8px 4px; border-radius:10px; background:#eef1f5; font-size:10.5px; font-weight:700; color:#333}
.cp-approve__btns .cp-yes{background:#00286B; color:#fff}
.cp-live{background:linear-gradient(170deg,#FEBC43,#F28C28)}
.cp-live .mini-phone__bg{object-fit:contain; object-position:center 70%; top:12%; height:80%}
.cp-live__tag{position:absolute; z-index:2; left:12px; right:12px; top:36px; color:#fff; font-size:10.5px; text-shadow:0 1px 3px rgba(0,0,0,.35)}
.cp-fit__grid{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1000px; margin:0 auto}
.cp-bre{background:var(--cream); padding:0 0 clamp(52px,6vw,84px)}
.cp-fit{padding-bottom:clamp(36px,4vw,56px)}
.cp-bre__card{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,3vw,44px); align-items:center; max-width:960px; margin:0 auto; background:var(--primary); color:#fff; border-radius:26px; padding:clamp(22px,2.6vw,34px); box-shadow:0 30px 60px -34px rgba(0,40,107,.6)}
.cp-bre__pics{position:relative; height:clamp(190px,18vw,230px)}
.cp-bre__pic{position:absolute; border-radius:14px; object-fit:cover; box-shadow:0 18px 30px -16px rgba(0,0,0,.6); border:3px solid #fff}
.cp-bre__pic--a{left:0; top:0; width:56%; height:100%; transform:rotate(-4deg); object-position:47% center}
.cp-bre__pic--b{right:2%; top:8%; width:50%; height:62%; transform:rotate(4deg)}
.cp-bre__trophy{position:absolute; right:10%; bottom:-10px; width:36%; transform:rotate(-6deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); z-index:2}
.cp-bre__copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0 0 10px}
.cp-bre__copy h2 em{font-style:normal; color:var(--brand-secondary)}
.cp-bre__copy p{margin:0 0 14px; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.84)}
.cp-bre__by{display:inline-flex; align-items:center; gap:10px; font-size:.86rem; color:rgba(255,255,255,.75)}
.cp-bre__by img{width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:center 25%; border:2px solid var(--brand-secondary)}
.cp-bre__by a{color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:var(--brand-secondary); text-underline-offset:3px}
@media (max-width:1000px){ .cp-flow__row{grid-template-columns:1fr 1fr; row-gap:48px} }
@media (max-width:760px){
  .cp-fit__grid{grid-template-columns:1fr}
  .cp-bre__card{grid-template-columns:1fr}
  .cp-bre__pics{height:200px; max-width:320px; width:100%; margin:0 auto}
}
@media (max-width:560px){ .cp-flow__row{grid-template-columns:1fr} .cp-flow .mini-phone{width:220px} }

/* round 34: even spacing into the FAQ on every service page */
.svc-faq{padding-top:clamp(52px,6vw,80px)!important; padding-bottom:clamp(52px,6vw,80px)!important}
.bs-phones:has(+ .svc-faq){padding-bottom:clamp(20px,2.5vw,32px)}
.bs-split:has(+ .cp-fit){padding-bottom:clamp(20px,2.5vw,32px)}
.cp-fit{padding-top:clamp(24px,3vw,40px)}
.cp-row span{font-size:10.5px}
/* round 35: approval phone text off the screen edge; Meet Bre link */
.mini-phone .cp-approve__cap{margin:0!important; padding:0 16px; font-size:11px}
.mini-phone .cp-approve__post{margin:12px 14px}
.mini-phone .cp-approve__btns{margin:12px 14px}
.cp-bre__link{display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:10px 18px; border-radius:999px; background:var(--brand-secondary); color:var(--primary); font-family:var(--font-display); font-weight:800; font-size:.95rem; text-decoration:none; box-shadow:0 10px 20px -12px rgba(0,0,0,.5); transition:transform .2s ease}
.cp-bre__link:hover{transform:translateY(-2px)}
.cp-bre__link span{transition:transform .2s ease}
.cp-bre__link:hover span{transform:translateX(4px)}

/* round 36: faux LinkedIn post image fills the card and shows Joe's head */
.li-post__img{width:100%!important; margin:8px 0 0!important; height:auto!important; aspect-ratio:16/10; object-fit:cover; object-position:58% 0!important; border-radius:6px; background:#01286b}
/* social "Content we make" reel: image starts below the notch so Joe's whole head shows */
.bs-phones .mini-phone--reel:not(.cp-live){background:#01286b}
.bs-phones .mini-phone--reel:not(.cp-live) img.mini-phone__bg{top:34px; height:calc(100% - 34px); object-position:62% top}
/* "Numbers that steer": Top post block sits inside the screen margins */
.mini-phone .mini-phone__top{margin:16px 0 6px!important; padding:0 16px}
.mini-phone .mini-phone__toppost{margin:0!important; padding:0 16px}
.mini-phone .mini-phone__note{margin:16px 14px 0!important}
/* round 37: long laptop URL was stretching the proof grid past the screen on phones */
.proof__grid > *{min-width:0}
.proof__left .laptop, .proof__left .laptop__screen{max-width:100%}
.laptop__chrome span{min-width:0}
@media (max-width:900px){ .proof__grid{grid-template-columns:minmax(0,1fr)!important} .proof__left .laptop__base{margin:0 -4%} }
@media (max-width:900px){ .proof__left .laptop__base{margin:0 -2%} }

/* QA 9/17: mascot-only feed tiles (captions removed): centre and enlarge the mascot */
.ig-tile--solo img{position:absolute;left:50%;bottom:7%;top:auto;transform:translateX(-50%);width:76%;height:auto;max-height:86%;object-fit:contain}
.ig-tile--solo:hover img{transform:translateX(-50%) scale(1.04)}

/* Joe profile: the 90-second intro (10/2/26) */
.joe-video{background:var(--primary); color:#fff; padding:clamp(56px,7vw,100px) 0}
.joe-video__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:center}
.joe-video__copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,4vw,3.2rem); line-height:1; letter-spacing:-.03em; color:#fff; margin:0 0 16px}
.joe-video__copy p{color:rgba(255,255,255,.85); font-size:1.08rem; line-height:1.6; margin:0 0 20px; max-width:46ch}
.joe-video__link{font-family:var(--font-display); font-weight:800; color:var(--brand-secondary); text-decoration:none}
.joe-video__media .meet-joe__video{border-radius:26px; overflow:hidden; transform:rotate(1.5deg); box-shadow:0 40px 70px -30px rgba(0,0,0,.6); aspect-ratio:16/10; background:#0a3a8a}
.joe-video__media .meet-joe__video img{width:100%; height:100%; object-fit:cover; object-position:center 25%}
.joe-video__media iframe{width:100%; height:100%; border:0; display:block}
@media (max-width:860px){ .joe-video__grid{grid-template-columns:1fr} .joe-video__media .meet-joe__video{transform:none} }