/* MYSFIT canonical global site navigation — official homepage behavior, shared across public pages. */
html.mysfit-route-arriving,html.mysfit-section-arriving{background:#f8f5f0}
html.mysfit-route-arriving--dark{background:#304e6b}
html.mysfit-route-arriving body,html.mysfit-section-arriving body{opacity:0;transition:opacity .26s cubic-bezier(.22,1,.36,1)}
html.mysfit-route-arriving.mysfit-route-ready body,html.mysfit-section-arriving.mysfit-route-ready body{opacity:1}
/* Hide superseded navigation before deferred JS can paint it. */
[data-main-nav],[data-mobile-menu],body.copyist-creative .mc-nav,#root nav.fixed.top-0.left-0.right-0.z-50{display:none!important}
.mysfit-site-nav{position:fixed;z-index:5000;top:0;left:0;right:0;height:80px;background:transparent;border-bottom:1px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),-webkit-backdrop-filter .3s cubic-bezier(.4,0,.2,1),backdrop-filter .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav.is-scrolled{background:rgba(248,245,240,.60);border-bottom:1px solid rgba(255,255,255,.34);box-shadow:0 10px 24px -8px rgba(0,0,0,.16),0 4px 10px -6px rgba(0,0,0,.12);-webkit-backdrop-filter:blur(24px) saturate(128%);backdrop-filter:blur(24px) saturate(128%)}
.mysfit-site-nav__inner{height:80px;width:100%;padding:0 16px;display:flex;align-items:center;justify-content:space-between}
.mysfit-site-nav__logo{display:flex;align-items:center;gap:12px;flex:0 0 auto;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav__logo:hover{transform:scale(1.05)}
.mysfit-site-nav__logo img{display:block;width:auto;height:48px;max-width:none;transition:height .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav.is-scrolled .mysfit-site-nav__logo img{height:40px}
.mysfit-site-nav__links{display:none;align-items:center;gap:32px}
.mysfit-site-nav__link{position:relative;padding:8px 0;color:#1a1a1a;font-family:Barlow,sans-serif;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav.is-dark-top:not(.is-scrolled) .mysfit-site-nav__link{color:#fff}
.mysfit-site-nav__link::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;background:#c17c53;transform:translateX(-50%);transition:width .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav__link:hover,.mysfit-site-nav__link.is-active{color:#c17c53}
.mysfit-site-nav.is-dark-top:not(.is-scrolled) .mysfit-site-nav__link.is-active{color:#fff}
.mysfit-site-nav__link:hover::after{width:100%}
.mysfit-site-nav__cta{display:none;align-items:center;justify-content:center;padding:16px 32px;border:0;border-radius:2px;background:#c17c53;color:#fff;font-family:Barlow,sans-serif;font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease}
.mysfit-site-nav__cta:hover{background:#7c3f3f;transform:scale(1.02);box-shadow:0 10px 25px rgba(193,124,83,.30)}
.mysfit-site-nav__cta svg,.mysfit-site-mobile-nav__cta svg{width:16px;height:16px;margin-left:8px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mysfit-site-nav__toggle{display:flex;align-items:center;justify-content:center;padding:8px;border:0;background:transparent;color:#1a1a1a;cursor:pointer;transition:color .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-nav.is-dark-top:not(.is-scrolled) .mysfit-site-nav__toggle{color:#fff}
.mysfit-site-nav__toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mysfit-site-mobile-nav{display:block;position:fixed;z-index:4990;left:0;right:0;top:80px;bottom:0;isolation:isolate;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s cubic-bezier(.22,.78,.24,1),visibility 0s linear .38s}
.mysfit-site-mobile-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mysfit-site-mobile-nav__backdrop{position:absolute;opacity:0;transition:opacity .38s ease;inset:0;width:100%;height:100%;border:0;background:rgba(248,245,240,.18);-webkit-backdrop-filter:blur(18px) saturate(118%);backdrop-filter:blur(18px) saturate(118%);cursor:default}
.mysfit-site-mobile-nav__panel{position:absolute;top:0;left:0;right:0;padding:24px 16px;opacity:0;transform:translate3d(0,-14px,0);transition:opacity .34s ease,transform .48s cubic-bezier(.22,.78,.24,1);border-top:1px solid rgba(255,255,255,.46);background:rgba(248,245,240,.60);box-shadow:0 12px 28px -10px rgba(0,0,0,.22),0 4px 12px -8px rgba(0,0,0,.14);-webkit-backdrop-filter:blur(28px) saturate(132%);backdrop-filter:blur(28px) saturate(132%)}
.mysfit-site-mobile-nav__links{display:grid;gap:16px}
.mysfit-site-mobile-nav__links a{display:block;width:100%;padding:12px 0;color:#1a1a1a;font-family:Barlow,sans-serif;font-size:18px;font-weight:400;line-height:1.2;text-align:left;text-decoration:none;transition:color .3s cubic-bezier(.4,0,.2,1)}
.mysfit-site-mobile-nav__links a:hover,.mysfit-site-mobile-nav__links a.is-active{color:#c17c53}
.mysfit-site-mobile-nav__cta{display:flex;align-items:center;justify-content:center;width:100%;margin-top:16px;padding:16px 32px;border-radius:2px;background:#c17c53;color:#fff;font-family:Barlow,sans-serif;font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease}
.mysfit-site-mobile-nav__cta:hover{background:#7c3f3f;transform:scale(1.01);box-shadow:0 10px 25px rgba(193,124,83,.30)}
/* Entity/Q&A panels previously owned their own mini-header. The shared 80px site bar now owns that space. */
body.copyist-entity-page main{padding-top:112px!important;padding-bottom:32px!important}
body.copyist-entity-page main>section{max-height:calc(100dvh - 144px)}
@media(min-width:640px){.mysfit-site-nav__inner{padding-left:24px;padding-right:24px}.mysfit-site-mobile-nav__panel{padding-left:24px;padding-right:24px}}
@media(min-width:1024px){.mysfit-site-nav__inner{padding-left:32px;padding-right:32px}.mysfit-site-nav__cta{display:inline-flex}}
@media(min-width:1280px){.mysfit-site-nav__inner{padding-left:48px;padding-right:48px}.mysfit-site-nav__links{display:flex}.mysfit-site-nav__toggle{display:none}}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 .mysfit-site-nav.is-scrolled{background:rgba(248,245,240,.94)}
 .mysfit-site-mobile-nav__backdrop{background:rgba(248,245,240,.82)}
 .mysfit-site-mobile-nav__panel{background:rgba(248,245,240,.60)}
}
@media(prefers-reduced-motion:reduce){html.mysfit-route-arriving body,html.mysfit-section-arriving body,.mysfit-site-nav,.mysfit-site-nav__logo,.mysfit-site-nav__logo img,.mysfit-site-nav__link,.mysfit-site-nav__link::after,.mysfit-site-nav__cta,.mysfit-site-nav__toggle,.mysfit-site-mobile-nav__cta{transition-duration:.001ms!important}}

.mysfit-site-mobile-nav.is-open .mysfit-site-mobile-nav__panel{opacity:1;transform:none}
.mysfit-site-mobile-nav.is-open .mysfit-site-mobile-nav__backdrop{opacity:1}

/* ==========================================================================\n   CREATIVE FROSTED TOP BAR — always active from the first frame\n   The shared site header stays the single navigation system. Creative only\n   receives a permanent dark-navy glass surface so it reads as one layer above\n   every film/panel rather than borrowing whichever panel happens to sit below.\n   ========================================================================== */
body.copyist-creative > .mysfit-site-nav,
body.copyist-creative > .mysfit-site-nav.is-scrolled{
 position:fixed!important;
 z-index:2147483000!important;
 inset:0 0 auto 0!important;
 width:100%!important;
 max-width:none!important;
 isolation:isolate;
 background:rgba(4,23,34,.60)!important;
 border-top:1px solid rgba(255,255,255,.10)!important;
 border-bottom:1px solid rgba(255,255,255,.22)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.20),0 14px 34px -24px rgba(0,0,0,.72)!important;
 -webkit-backdrop-filter:blur(24px) saturate(132%)!important;
 backdrop-filter:blur(24px) saturate(132%)!important;
}
body.copyist-creative > .mysfit-site-nav .mysfit-site-nav__link,
body.copyist-creative > .mysfit-site-nav .mysfit-site-nav__toggle{color:#fff!important}
body.copyist-creative > .mysfit-site-nav .mysfit-site-nav__link:hover,
body.copyist-creative > .mysfit-site-nav .mysfit-site-nav__link.is-active{color:#c17c53!important}
body.copyist-creative > .mysfit-site-mobile-nav{z-index:2147482990!important}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 body.copyist-creative > .mysfit-site-nav,
 body.copyist-creative > .mysfit-site-nav.is-scrolled{background:rgba(4,23,34,.94)!important}
}


/* ========================================================================== 
   FINAL POLISH — Creative mobile menu + Q&A smartphone header choreography
   ========================================================================== */

/* Creative keeps the same canonical mobile navigation geometry, but the
   surface belongs to the Creative dark theme: deeper navy glass, white type and
   terracotta action/active accents. */
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__backdrop{
 /* Keep the secondary overlay almost untinted so it does not compound the
    60% panel into an apparently opaque sheet; frosting remains active. */
 background:rgba(6,30,44,.04)!important;
 -webkit-backdrop-filter:blur(18px) saturate(112%)!important;
 backdrop-filter:blur(18px) saturate(112%)!important;
}
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__panel{
 /* Existing Creative deep navy (#061e2c): one shade darker than --navy #102f45. */
 background:rgba(6,30,44,.60)!important;
 border-top:1px solid rgba(255,255,255,.18)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px -18px rgba(0,0,0,.74)!important;
 -webkit-backdrop-filter:blur(28px) saturate(120%)!important;
 backdrop-filter:blur(28px) saturate(120%)!important;
}
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__links a{
 color:#fff!important;
}
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__links a:hover,
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__links a.is-active{
 color:#c17c53!important;
}
/* Keep the orange CTA exactly in the canonical action language. */
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__cta{
 background:#c17c53!important;
 color:#fff!important;
}

/* Q&A smartphone: preserve the rounded editorial container, but let the page
   itself scroll naturally. The shell begins one header-height below the bar;
   after ~80px of real page travel its rounded top reaches the 80px header and
   site.js triggers the exact canonical scrolled-header animation. */
@media(max-width:639px){
 body.copyist-qa-page{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  min-height:100dvh!important;
 }
 body.copyist-qa-page main{
  min-height:0!important;
  display:block!important;
  padding-top:160px!important;
  padding-bottom:32px!important;
 }
 body.copyist-qa-page main>section[data-qa-shell]{
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  margin:0 auto!important;
 }
 body.copyist-qa-page main>section[data-qa-shell]>.flex-1{
  flex:none!important;
  overflow:visible!important;
 }
 body.copyist-qa-page main>section[data-qa-shell]>.flex-1>.min-h-full{
  min-height:0!important;
 }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__backdrop{background:rgba(6,30,44,.18)!important}
 body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__panel{background:rgba(6,30,44,.60)!important}
}


/* ========================================================================== 
   FINAL CONSISTENCY PASS — 60% global frosted header + smartphone menu motion
   ========================================================================== */
/* Non-Creative scrolled headers now use the same 60% glass strength already
   approved on Creative. Initial transparent-header logic remains unchanged. */

@media(max-width:639px){
 .mysfit-site-mobile-nav{
  overflow:hidden;
  opacity:1;
  transition:visibility 0s linear .75s;
 }
 .mysfit-site-mobile-nav.is-open{
  opacity:1;
  transition-delay:0s;
 }
 .mysfit-site-mobile-nav__backdrop{
  transition:opacity .75s cubic-bezier(.22,1,.36,1);
 }
 .mysfit-site-mobile-nav__panel{
  opacity:1;
  transform:translate3d(0,-100%,0);
  transition:transform .75s cubic-bezier(.22,1,.36,1);
  will-change:transform;
 }
 .mysfit-site-mobile-nav.is-open .mysfit-site-mobile-nav__panel{
  opacity:1;
  transform:translate3d(0,0,0);
 }
}
@media(max-width:639px) and (prefers-reduced-motion:reduce){
 .mysfit-site-mobile-nav,
 .mysfit-site-mobile-nav__backdrop,
 .mysfit-site-mobile-nav__panel{transition-duration:.001ms!important}
}




/* ==========================================================================
   FORENSIC CREATIVE ATTENTION + 60% DROPDOWN GUARANTEE — 2026-09-09
   Actual ribbon elements are animated by site.js, avoiding pseudo-element
   cascade/stacking ambiguity. The panel surface remains exactly 60% alpha.
   ========================================================================== */
body:not(.copyist-creative) > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__panel{
 background-color:rgba(248,245,240,.60)!important;
 background-image:none!important;
 -webkit-backdrop-filter:blur(28px) saturate(132%)!important;
 backdrop-filter:blur(28px) saturate(132%)!important;
}
body:not(.copyist-creative) > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__backdrop{
 background:rgba(248,245,240,.04)!important;
}
body.copyist-creative > .mysfit-site-mobile-nav .mysfit-site-mobile-nav__panel{
 background-color:rgba(6,30,44,.60)!important;
 background-image:none!important;
}
.mysfit-site-nav__link[href="/creative"],
.mysfit-site-mobile-nav__links a[href="/creative"]{position:relative;isolation:isolate;overflow:visible}
.mysfit-nav-link-label{position:relative;z-index:1}
/* Creative attention is a stationary highlighted CTA revealed by a wipe mask.
   The duplicate label is runtime-aligned to the base label in site.js, so the
   typography never translates/skews and the wipe alone creates the motion. */
.mysfit-creative-attention{
 position:absolute;z-index:6;pointer-events:none;display:block;overflow:visible;
 opacity:1;will-change:auto;
}
.mysfit-creative-attention__window{position:absolute;inset:0;overflow:visible;clip-path:polygon(-12% 0,-4% 0,-10% 100%,-18% 100%);will-change:clip-path}
.mysfit-creative-attention__cta{
 position:absolute;inset:0;background:#102f45;
 /* Only a slight CTA slant: explicitly not an arrowhead/notched ribbon. */
 clip-path:polygon(2.4% 0,100% 0,97.6% 100%,0 100%);
 box-shadow:0 0 0 1px rgba(255,255,255,.025) inset;
}
.mysfit-creative-attention__label{
 position:absolute;z-index:1;display:block;color:#fff!important;font:inherit;
 line-height:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;
 font-style:normal!important;transform:none!important;
}
.mysfit-creative-attention__edge{
 --edge:var(--mysfit-wipe-edge,40px);position:absolute;z-index:3;top:0;bottom:0;
 width:var(--edge);opacity:0;pointer-events:none;transform-origin:center;
 /* Horizontal feathering fakes motion blur while top/bottom remain hard. */
 clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);will-change:transform,opacity;
}
.mysfit-creative-attention__edge--lead{
 left:0;background:linear-gradient(90deg,rgba(16,47,69,0) 0%,rgba(16,47,69,.18) 18%,rgba(16,47,69,.72) 62%,rgba(16,47,69,.98) 100%);
}
.mysfit-creative-attention__edge--trail{
 left:0;background:linear-gradient(90deg,rgba(16,47,69,.98) 0%,rgba(16,47,69,.76) 34%,rgba(16,47,69,.22) 72%,rgba(16,47,69,0) 100%);
}
.mysfit-site-nav__link[href="/creative"] .mysfit-creative-attention{inset:2px -14px}
@media(max-width:1279px){
 .mysfit-site-mobile-nav__links a[href="/creative"] .mysfit-creative-attention{left:-10px;right:-10px;top:5px;bottom:5px}
}
@media(prefers-reduced-motion:reduce){.mysfit-creative-attention{display:none!important}}

/* ========================================================================== 
   iOS NAVIGATION PERFORMANCE PATH — 2026-09-09
   Safari/iPadOS receives the same MYSFIT surface with a cheaper compositor path:
   one lighter glass layer, no secondary backdrop blur, and a shorter transition.
   Desktop/Android rules above remain unchanged.
   ========================================================================== */
html.mysfit-ios .mysfit-site-nav__toggle{
 touch-action:manipulation;
 -webkit-tap-highlight-color:transparent;
}
html.mysfit-ios .mysfit-site-nav.is-scrolled{
 -webkit-backdrop-filter:blur(12px) saturate(116%);
 backdrop-filter:blur(12px) saturate(116%);
}
html.mysfit-ios body.copyist-creative > .mysfit-site-nav,
html.mysfit-ios body.copyist-creative > .mysfit-site-nav.is-scrolled{
 -webkit-backdrop-filter:blur(12px) saturate(118%)!important;
 backdrop-filter:blur(12px) saturate(118%)!important;
}
@media(max-width:1279px){
 html.mysfit-ios .mysfit-site-mobile-nav{
  opacity:1;
  overflow:hidden;
  transition:visibility 0s linear .28s!important;
 }
 html.mysfit-ios .mysfit-site-mobile-nav.is-open{
  transition-delay:0s!important;
 }
 html.mysfit-ios .mysfit-site-mobile-nav__backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transition:opacity .22s ease-out!important;
  will-change:opacity;
 }
 html.mysfit-ios .mysfit-site-mobile-nav__panel{
  opacity:1;
  transform:translate3d(0,-100%,0);
  -webkit-backdrop-filter:blur(12px) saturate(112%)!important;
  backdrop-filter:blur(12px) saturate(112%)!important;
  transition:transform .28s cubic-bezier(.22,1,.36,1)!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
 }
 html.mysfit-ios .mysfit-site-mobile-nav.is-open .mysfit-site-mobile-nav__panel{
  transform:translate3d(0,0,0);
 }
}
@media(max-width:1279px) and (prefers-reduced-motion:reduce){
 html.mysfit-ios .mysfit-site-mobile-nav,
 html.mysfit-ios .mysfit-site-mobile-nav__backdrop,
 html.mysfit-ios .mysfit-site-mobile-nav__panel{transition-duration:.001ms!important}
}


/* ========================================================================== 
   MYSFIT WEBKIT PERFORMANCE BOOTSTRAP — 2026-09-10
   Safari/iOS keeps the mobile navigation tree alive off-screen so the first
   tap does not have to create/layout/promote the entire glass panel. The
   visible 60% surface responds first; the light backdrop glass is restored
   just after the opening movement by site.js. Chromium/Firefox are untouched.
   ========================================================================== */
@media(max-width:1279px){
 html.mysfit-webkit-perf .mysfit-site-mobile-nav{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:none;
  contain:layout style;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
 }
 html.mysfit-webkit-perf .mysfit-site-mobile-nav.is-open{pointer-events:auto}
 html.mysfit-webkit-perf .mysfit-site-mobile-nav__panel{
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  contain:layout style;
  transform:translate3d(0,-100%,0);
  -webkit-transform:translate3d(0,-100%,0);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
 }
 html.mysfit-webkit-perf .mysfit-site-mobile-nav.is-open .mysfit-site-mobile-nav__panel{
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
 }
 html.mysfit-webkit-perf .mysfit-site-mobile-nav__backdrop{will-change:opacity}
 html.mysfit-webkit-perf .mysfit-site-nav__toggle{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
 }
 html.mysfit-webkit-menu-open,
 html.mysfit-webkit-menu-open body{overscroll-behavior:none}
}