/* =========================================================
   P5.MEDIA V20.2 — FLUENT 2 / LAYOUT-SAFE THEME
   Design-only layer. V20.2 spacing, grids, sizing and responsive
   geometry are intentionally left untouched.
   ========================================================= */

:root{
  --fluent-brand:#0f6cbd;
  --fluent-brand-hover:#115ea3;
  --fluent-brand-pressed:#0c3b5e;
  --fluent-brand-subtle:#ebf3fc;
  --fluent-brand-subtle-2:#f5f9fd;
  --fluent-bg:#f5f5f5;
  --fluent-surface:#ffffff;
  --fluent-surface-2:#fafafa;
  --fluent-dark:#1f1f1f;
  --fluent-dark-2:#292929;
  --fluent-text:#242424;
  --fluent-muted:#616161;
  --fluent-stroke:#d1d1d1;
  --fluent-stroke-strong:#adadad;
  --fluent-stroke-dark:#525252;
  --fluent-shadow-2:0 1px 2px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.10);
  --fluent-shadow-4:0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.10);
  --fluent-shadow-8:0 4px 8px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.10);
  --fluent-shadow-16:0 8px 16px rgba(0,0,0,.16),0 0 2px rgba(0,0,0,.10);
  --fluent-shadow-28:0 14px 28px rgba(0,0,0,.18),0 0 8px rgba(0,0,0,.08);
  --fluent-font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Retheme the native P5 tokens without changing its geometry. */
  --paper:var(--fluent-bg);
  --ink:var(--fluent-text);
  --red:var(--fluent-brand);
  --white:#fff;
  --muted:var(--fluent-muted);
  --line:rgba(36,36,36,.16);
  --dark:var(--fluent-dark);
  --dark2:var(--fluent-dark-2);
}

html,body{background:var(--paper);color:var(--ink)}
body{background-image:radial-gradient(circle at 92% 2%,rgba(15,108,189,.07),transparent 23%)}
::selection{background:#cfe4fa;color:#0c3b5e}
:focus-visible{outline:2px solid var(--fluent-brand);outline-offset:3px}
.grain{opacity:.012}

/* Fluent app chrome — exact original position/height/grid preserved. */
.topbar{
  mix-blend-mode:normal;
  color:var(--fluent-text);
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:var(--fluent-shadow-4);
  backdrop-filter:blur(24px) saturate(155%);
  -webkit-backdrop-filter:blur(24px) saturate(155%);
}
.brand{font-family:var(--fluent-font);font-weight:650;letter-spacing:-.02em}
.brand-main:before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:3px;background:var(--fluent-brand);box-shadow:var(--fluent-shadow-2)}
.nav,.clientwork-link{font-family:var(--fluent-font);letter-spacing:0;font-weight:550}
.nav a:after,.clientwork-link:after{background:var(--fluent-brand)}
.clientwork-link{color:var(--fluent-brand)}
.menu-toggle{border-radius:8px}
.mobile-menu{background:rgba(255,255,255,.97)!important;color:var(--fluent-text)!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--fluent-shadow-28)}
.mobile-menu a{border-color:var(--fluent-stroke)!important}

/* Global surfaces */
.section-light{background:transparent;color:var(--fluent-text)}
.section-dark{background:var(--fluent-dark);color:#fff}
.section-red{background:#eef6fc;color:var(--fluent-text)}
.eyebrow{color:var(--fluent-muted)}
.lead{color:inherit}

/* Hero: original editorial composition preserved. */
.hero{background:radial-gradient(circle at 78% 20%,rgba(15,108,189,.10),transparent 30%),linear-gradient(180deg,#fafafa 0%,#f5f5f5 100%)}
.hero-meta{border-color:var(--fluent-stroke);color:var(--fluent-muted)}
.hero-title em{color:var(--fluent-brand)}
.hero-bottom p{color:var(--fluent-muted)}
.circle-cta{
  border-radius:28px;
  background:var(--fluent-brand);
  color:#fff;
  box-shadow:var(--fluent-shadow-8);
  font-family:var(--fluent-font);
  font-weight:650;
  letter-spacing:0;
}
.circle-cta:hover{background:var(--fluent-brand-hover);transform:translateY(-2px)}
.scroll-line{background:var(--fluent-brand)}

/* Manifesto */
.manifesto{border-color:var(--fluent-stroke)}
.manifesto h2 span,.digital-head h2 span{color:var(--fluent-brand)}
.manifesto-grid p:not(.lead){color:var(--fluent-muted)}

/* P5.SPACE / experimental field */
.p5-space{background:var(--fluent-dark)}
.p5-space-stage{border-color:var(--fluent-stroke-dark)!important;border-radius:16px!important;box-shadow:var(--fluent-shadow-16)!important;background-color:#242424!important}
.space-card{border-color:rgba(255,255,255,.16)!important;border-radius:12px!important;box-shadow:var(--fluent-shadow-8)!important}
.space-tag{border-radius:999px!important;border-color:rgba(255,255,255,.18)!important;background:rgba(36,36,36,.82)!important}
.space-orbit{border-color:#5b9bd5!important}.space-orbit:before,.space-orbit:after{border-color:rgba(91,155,213,.5)!important}
.space-crosshair:before,.space-crosshair:after{background:#5b9bd5!important}

/* Photo / analog.hours rolls — original horizontal filmstrip mechanics preserved. */
.photo{border-color:var(--fluent-stroke)}
.photo-rolls-head,.live-roll-head,.section-actions--client-work{border-color:var(--fluent-stroke)!important}
.photo-rolls-head>p:last-child,.live-roll-head small,.live-roll-head>span,.frame-meta{color:var(--fluent-muted)!important}
.frame-art{border-color:var(--fluent-stroke-strong)!important;border-radius:12px!important;box-shadow:var(--fluent-shadow-4)!important}
.frame-index{background:rgba(255,255,255,.90)!important;color:var(--fluent-text)!important;border-radius:4px;box-shadow:var(--fluent-shadow-2)}
.section-actions--client-work a{color:var(--fluent-brand);text-decoration:none;border-color:var(--fluent-brand)!important}

/* Motion — exact 3-column / horizontal mobile structure stays native. */
.motion{background:var(--fluent-dark)}
.motion-top,.motion-bottomline{border-color:var(--fluent-stroke-dark)!important}
.rec i{background:#6ccb5f!important}
.motion-editorial-note,.motion-cut-meta,.motion-bottomline{color:#bdbdbd!important}
.motion-cut-media{border-color:var(--fluent-stroke-dark)!important;border-radius:12px!important;box-shadow:var(--fluent-shadow-8)!important}
.motion-cut-play{background:rgba(255,255,255,.90)!important;color:var(--fluent-text)!important;border-color:rgba(255,255,255,.3)!important;box-shadow:var(--fluent-shadow-8)!important}
.motion-cut-play:hover{background:#fff!important;color:var(--fluent-brand)!important}
.motion-bottomline a{color:#6cb8f5!important;border-color:#6cb8f5!important}

/* Digital showcase — retain original split-screen dimensions. */
.digital-showcase{
  background:#202020!important;
  border-color:#3d3d3d!important;
  box-shadow:var(--fluent-shadow-28)!important;
  border-radius:16px!important;
}
.digital-showcase:before{background:radial-gradient(circle,rgba(15,108,189,.28),rgba(15,108,189,0) 68%)!important}
.digital-showcase-top{border-color:var(--fluent-stroke-dark)!important;background:#292929!important}
.digital-showcase-live i{background:#6ccb5f!important;box-shadow:none!important}
.digital-showcase-copy>small,.digital-showcase-copy p{color:#c7c7c7!important}
.digital-showcase-copy h3 em{color:#6cb8f5!important}
.digital-showcase-cta{border-color:#707070!important;color:#fff!important}
.digital-showcase:hover .digital-showcase-cta{color:#6cb8f5!important;border-color:#6cb8f5!important}
.digital-showcase-browser{border-color:#525252!important;border-radius:10px!important;box-shadow:var(--fluent-shadow-28)!important}
.digital-showcase-browserbar{background:#292929!important;border-color:#525252!important}
.digital-showcase-marquee{border-color:#525252!important}
.digital-discipline-break{border-color:var(--fluent-stroke)!important;color:var(--fluent-muted)!important}
.digital-discipline-break b{color:var(--fluent-brand)!important}
.discipline-services span{border-color:var(--fluent-stroke)!important;border-radius:999px!important;color:var(--fluent-muted)!important}
.discipline-index{border-color:var(--fluent-stroke)!important;border-radius:10px!important;background:var(--fluent-surface)!important;box-shadow:var(--fluent-shadow-2)!important}

/* Process — preserve the native three-column track. */
.process{border-color:var(--fluent-stroke)}
.process-grid{border-color:var(--fluent-stroke)}
.process-grid article{border-color:var(--fluent-stroke)!important}
.process-grid article>span{color:var(--fluent-brand)}
.process article p{color:var(--fluent-muted)}

/* Contact keeps original spacing, but moves to Fluent brand-subtle. */
.contact{background:linear-gradient(135deg,#eef6fc 0%,#f8fbff 100%)}
.contact>.eyebrow{border-color:rgba(15,108,189,.30)}
.contact h2 span{-webkit-text-stroke:2px var(--fluent-brand);color:transparent}
.contact .inverse{color:var(--fluent-text)}
.contact-actions{font-family:var(--fluent-font);letter-spacing:0}
.contact-actions>a{color:var(--fluent-brand)}
.contact-big{border-color:var(--fluent-brand);color:var(--fluent-text)}
.contact-big:hover{color:var(--fluent-brand)}

/* Analog exit */
.escape{background:var(--fluent-dark)}
.analog-exit{background:#292929;border-color:#525252;border-radius:12px;box-shadow:var(--fluent-shadow-8)}
.analog-exit:before{background:#eef6fc}.analog-exit:hover{color:var(--fluent-text)}

/* Footer */
.footer{background:#fafafa;border-color:var(--fluent-stroke);color:var(--fluent-text)}
.footer button,.footer a{color:var(--fluent-brand);text-decoration:none}
.footer button:hover,.footer a:hover{text-decoration:underline}

/* Legal / project dialogs — Fluent controls, native dialog layout preserved. */
.legal-modal,.project-modal{background:rgba(255,255,255,.98)!important;color:var(--fluent-text)!important;border-color:var(--fluent-stroke)!important;box-shadow:0 32px 64px rgba(0,0,0,.24)}
.legal-modal{border-radius:16px}
.legal-modal::backdrop,.project-modal::backdrop{background:rgba(0,0,0,.48)!important;backdrop-filter:blur(5px)}
.legal-content p{color:var(--fluent-muted)}
.legal-content a,.project-fallback a{color:var(--fluent-brand)}
.modal-close,.project-close{background:var(--fluent-brand)!important;color:#fff!important;border-color:var(--fluent-brand)!important;border-radius:8px!important;box-shadow:var(--fluent-shadow-4)}
.modal-close:hover,.project-close:hover{background:var(--fluent-brand-hover)!important;color:#fff!important}
.project-modal-head,.project-types,.project-grid,.project-grid>label,.project-choices,.project-success,.project-fallback{border-color:var(--fluent-stroke)!important}
.project-modal-head h2 span,.project-success>span{color:var(--fluent-brand)!important}
.project-type{border-color:var(--fluent-stroke)!important}
.project-type:hover,.project-type.is-active{background:var(--fluent-brand-subtle)!important;color:var(--fluent-brand)!important}
.project-form input[type=text],.project-form input[type=email],.project-form select,.project-form textarea{color:var(--fluent-text)!important}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{box-shadow:inset 0 -3px 0 var(--fluent-brand)!important}
.project-choices label span{border-color:var(--fluent-stroke)!important;border-radius:8px}
.project-choices input:checked+span{background:var(--fluent-brand)!important;color:#fff!important;border-color:var(--fluent-brand)!important}
.project-submit button{background:var(--fluent-brand)!important;color:#fff!important;border-radius:10px;box-shadow:var(--fluent-shadow-4)}
.project-submit button:hover{background:var(--fluent-brand-hover)!important;color:#fff!important}

/* Cookie UI */
.p5-cookie-banner,.p5-cookie-settings{
  --p5-cookie-bg:rgba(255,255,255,.97)!important;
  --p5-cookie-line:var(--fluent-stroke)!important;
  --p5-cookie-text:var(--fluent-text)!important;
  --p5-cookie-muted:var(--fluent-muted)!important;
  --p5-cookie-accent:var(--fluent-brand)!important;
  font-family:var(--fluent-font)!important;
}
.p5-cookie-banner{border-radius:14px!important;box-shadow:var(--fluent-shadow-28)!important;backdrop-filter:blur(20px)}
.p5-cookie-btn{border-radius:8px!important;font-weight:600!important;letter-spacing:0!important}
.p5-cookie-btn--primary{background:var(--fluent-brand)!important;color:#fff!important;border-color:var(--fluent-brand)!important}
.p5-cookie-btn--primary:hover{background:var(--fluent-brand-hover)!important}
.p5-cookie-settings__panel{border-radius:16px!important;box-shadow:0 32px 64px rgba(0,0,0,.24)!important}
.p5-cookie-row{border-radius:10px!important;border-color:var(--fluent-stroke)!important}

/* V20.2 interaction tools — same anchors, Fluent appearance only. */
.p5-interaction-trigger{border-color:var(--fluent-stroke)!important;background:rgba(255,255,255,.94)!important;color:var(--fluent-text)!important;border-radius:8px!important;box-shadow:var(--fluent-shadow-4)!important}
.p5-interaction-trigger[aria-pressed="true"]{background:var(--fluent-brand)!important;color:#fff!important;border-color:var(--fluent-brand)!important}
.p5-interaction-trigger em{background:#242424!important;color:#fff!important;border-radius:6px!important}
.p5-reveal-lens{border-color:var(--fluent-brand)!important;box-shadow:var(--fluent-shadow-28)!important}
.p5-reveal-cross{background:var(--fluent-brand)!important}.p5-reveal-readout b{color:var(--fluent-brand)!important}.p5-reveal-target{outline-color:var(--fluent-brand)!important}
.p5-page-peel-handle{background:var(--fluent-brand)!important;color:#fff!important;box-shadow:var(--fluent-shadow-4)!important}
.p5-page-peel-layer{background:#202020!important;color:#fff!important;box-shadow:0 -20px 70px rgba(0,0,0,.32)!important}
.p5-page-peel-head,.p5-page-peel-copy,.p5-page-peel-nav{border-color:#525252!important}
.p5-page-peel-head h2 span{color:#6cb8f5!important}
.p5-page-peel-nav>a,.p5-page-peel-nav>button{border-color:#525252!important;background:#292929!important;border-radius:12px!important}
.p5-page-peel-nav>a:hover,.p5-page-peel-nav>button:hover{border-color:#6cb8f5!important;color:#fff!important}

/* Preserve all original responsive geometry. Only visual mobile tweaks. */
@media(max-width:900px){
  .topbar{background:rgba(255,255,255,.92)}
  .circle-cta{border-radius:24px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* Light acrylic app bar needs a dark mobile hamburger. */
.menu-toggle span{background:var(--fluent-text)!important}


/* =========================================================
   FOOTER LEGAL NAV — clean, consistent and mobile-safe
   ========================================================= */
.footer{
  grid-template-columns:1fr 1fr!important;
  grid-template-areas:
    "brand meta"
    "legal legal";
  align-items:end;
  row-gap:22px!important;
  padding-bottom:34px!important;
}
.footer-brand{grid-area:brand}
.footer-meta{grid-area:meta;text-align:right!important}
.footer-legal{
  grid-area:legal;
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
  padding-top:18px;
  border-top:1px solid var(--fluent-stroke);
  font:600 11px/1.2 var(--fluent-font);
  letter-spacing:.02em;
}
.footer-legal a,.footer-legal button{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  margin:0;
  padding:0 16px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--fluent-text)!important;
  font:inherit!important;
  text-decoration:none!important;
  cursor:pointer;
}
.footer-legal a:first-child{padding-left:0}
.footer-legal a+button,.footer-legal button+button{border-left:1px solid var(--fluent-stroke)!important}
.footer-legal a:hover,.footer-legal button:hover{color:var(--fluent-brand)!important;text-decoration:none!important}
.footer-legal a:focus-visible,.footer-legal button:focus-visible{outline:2px solid var(--fluent-brand);outline-offset:4px}

/* The V20.2 interaction rail otherwise sits directly over the legal links on phones. */
@media(max-width:720px){
  .footer{
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand meta"
      "legal legal";
    gap:18px 16px!important;
    padding-top:30px!important;
    padding-bottom:72px!important;
  }
  .footer-brand,.footer-meta{font-size:10px!important;line-height:1.45}
  .footer-legal{
    flex-wrap:wrap;
    gap:8px 0;
    padding-top:16px;
  }
  .footer-legal a,.footer-legal button{
    min-height:30px;
    padding:0 11px;
    font-size:10px!important;
  }
  .footer-legal a:first-child{padding-left:0}
  .p5-interaction-rail{display:none!important}
}

@media(max-width:420px){
  .footer{grid-template-columns:1fr!important;grid-template-areas:"brand" "meta" "legal"!important}
  .footer-meta{text-align:left!important}
  .footer-legal{align-items:flex-start;flex-direction:column;gap:0}
  .footer-legal a,.footer-legal button{padding:8px 0!important;min-height:0}
  .footer-legal a+button,.footer-legal button+button{border-left:0!important;border-top:1px solid var(--fluent-stroke)!important;width:100%}
}

/* =========================================================
   P5.MEDIA — FLUENT MAX / CREATIVE SYSTEM
   Stronger Fluent 2 personality without replacing V20.2 layout geometry.
   ========================================================= */
:root{
  --fx-blue:#0f6cbd;
  --fx-blue-2:#2886de;
  --fx-cyan:#0099bc;
  --fx-purple:#5b5fc7;
  --fx-violet:#8764b8;
  --fx-orange:#f7630c;
  --fx-green:#107c10;
  --fx-mica:rgba(255,255,255,.74);
  --fx-mica-strong:rgba(255,255,255,.90);
  --fx-dark-mica:rgba(32,32,36,.80);
  --fx-border:rgba(0,0,0,.09);
  --fx-border-dark:rgba(255,255,255,.12);
  --fx-soft-shadow:0 2px 4px rgba(0,0,0,.08),0 12px 36px rgba(0,0,0,.08);
  --fx-float-shadow:0 12px 30px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.07);
  --fx-deep-shadow:0 24px 70px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.10);
}

html{background:#f3f6fb}
body{
  background-color:#f3f6fb;
  background-image:
    radial-gradient(circle at 8% 10%,rgba(40,134,222,.12),transparent 24%),
    radial-gradient(circle at 90% 16%,rgba(135,100,184,.10),transparent 26%),
    radial-gradient(circle at 76% 72%,rgba(0,153,188,.07),transparent 24%),
    linear-gradient(180deg,#f8faff 0%,#f3f6fb 34%,#f7f7f8 100%);
  background-attachment:fixed;
  font-family:var(--fluent-font);
}

/* App bar / command bar */
.topbar{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  isolation:isolate;
}
.topbar::before{
  content:"";
  position:absolute;
  inset:8px clamp(10px,1.6vw,24px);
  z-index:-1;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,253,.78));
  box-shadow:0 8px 32px rgba(31,31,31,.10),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
}
.brand{display:inline-flex;align-items:center;min-height:38px}
.brand-main:before{
  width:12px;height:12px;margin-right:10px;border-radius:4px;
  background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple));
  box-shadow:11px 0 0 -3px rgba(0,153,188,.85),0 11px 0 -3px rgba(247,99,12,.72);
}
.nav{gap:5px!important;padding:4px;border-radius:11px;background:rgba(255,255,255,.42)}
.nav a{
  padding:7px 10px;
  border-radius:8px;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.nav a::after{display:none!important}
.nav a:hover{
  background:rgba(15,108,189,.09);
  color:var(--fx-blue);
  box-shadow:inset 0 0 0 1px rgba(15,108,189,.10);
  transform:translateY(-1px);
}
.clientwork-link{
  padding:9px 13px;border-radius:9px;
  background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple));
  color:#fff!important;box-shadow:0 3px 10px rgba(15,108,189,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.clientwork-link::after{display:none!important}
.clientwork-link:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(15,108,189,.28);filter:saturate(1.08)}
.menu-toggle{background:rgba(255,255,255,.62)!important;border:1px solid rgba(0,0,0,.08)!important;box-shadow:var(--fluent-shadow-2)!important}

/* Common Fluent labels */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border:1px solid rgba(15,108,189,.13)!important;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:#4d5b6a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-family:var(--fluent-font)!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
}
.section-dark .eyebrow,.motion .eyebrow,.escape .eyebrow,.p5-space .eyebrow{
  background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.12)!important;color:#d6d6dc!important;
}

/* Hero / start surface */
.hero{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 89% 18%,rgba(91,95,199,.17),transparent 28%),
    radial-gradient(circle at 73% 78%,rgba(0,153,188,.11),transparent 26%),
    radial-gradient(circle at 11% 44%,rgba(40,134,222,.11),transparent 24%),
    linear-gradient(150deg,#fbfcff 0%,#f3f7fc 48%,#fafafa 100%)!important;
}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(2px)}
.hero::before{
  width:min(34vw,480px);height:min(34vw,480px);right:-9vw;top:16%;
  background:conic-gradient(from 210deg,rgba(15,108,189,.12),rgba(91,95,199,.16),rgba(0,153,188,.08),rgba(15,108,189,.12));
  box-shadow:0 0 100px rgba(91,95,199,.08);
}
.hero::after{
  width:240px;height:240px;left:8%;bottom:4%;
  background:linear-gradient(135deg,rgba(247,99,12,.06),rgba(40,134,222,.06));
  transform:rotate(24deg);border-radius:48px;
}
.hero-meta{border-top:0!important;gap:8px!important;justify-content:flex-start!important;flex-wrap:wrap}
.hero-meta span{
  padding:7px 10px;border:1px solid rgba(0,0,0,.075);border-radius:999px;
  background:rgba(255,255,255,.62);box-shadow:0 1px 2px rgba(0,0,0,.04);backdrop-filter:blur(10px);
  font-family:var(--fluent-font);font-weight:600;letter-spacing:.03em;
}
.hero-meta span:nth-child(2){background:rgba(15,108,189,.075);color:#0c5b9d;border-color:rgba(15,108,189,.10)}
.hero-title{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hero-title em{
  color:transparent!important;
  background:linear-gradient(90deg,var(--fx-blue) 0%,var(--fx-purple) 52%,var(--fx-cyan) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 9px 24px rgba(91,95,199,.12));
}
.hero-bottom p{
  padding:18px 20px;border:1px solid rgba(0,0,0,.075);border-radius:18px;
  background:rgba(255,255,255,.54);box-shadow:var(--fluent-shadow-2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.circle-cta{
  position:relative;overflow:hidden;border-radius:28px!important;border:1px solid rgba(255,255,255,.24)!important;
  background:linear-gradient(140deg,#0f6cbd 4%,#5b5fc7 62%,#0099bc 120%)!important;
  box-shadow:0 14px 30px rgba(15,108,189,.22),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.circle-cta::before{content:"";position:absolute;inset:-40% 34% 52% -16%;background:rgba(255,255,255,.20);filter:blur(8px);transform:rotate(-25deg);pointer-events:none}
.circle-cta>*{position:relative;z-index:1}
.circle-cta:hover{transform:translateY(-4px) scale(1.025)!important;box-shadow:0 20px 40px rgba(15,108,189,.29),inset 0 1px 0 rgba(255,255,255,.34)!important}
.scroll-note{color:#67798c}
.scroll-line{height:3px!important;border-radius:99px;background:linear-gradient(90deg,var(--fx-blue),var(--fx-purple))!important}

/* Manifesto / light Mica panel */
.manifesto{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.62))!important}
.manifesto-grid>div{
  position:relative;padding:clamp(24px,3vw,38px);
  border:1px solid var(--fx-border);border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(248,250,253,.68));
  box-shadow:var(--fx-soft-shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.manifesto-grid>div::before{
  content:"";position:absolute;width:72px;height:6px;left:28px;top:0;transform:translateY(-50%);
  border-radius:99px;background:linear-gradient(90deg,var(--fx-blue),var(--fx-purple),var(--fx-cyan));
}
.manifesto h2 span{color:transparent!important;background:linear-gradient(90deg,var(--fx-blue),var(--fx-purple));-webkit-background-clip:text;background-clip:text}

/* P5.SPACE — dark Fluent material */
.p5-space{background:linear-gradient(180deg,#17171a 0%,#1f2025 52%,#17181c 100%)!important}
.p5-space-stage{
  border-radius:28px!important;border-color:rgba(255,255,255,.12)!important;
  background:
    radial-gradient(circle at 20% 18%,rgba(40,134,222,.19),transparent 27%),
    radial-gradient(circle at 82% 24%,rgba(135,100,184,.17),transparent 29%),
    radial-gradient(circle at 62% 82%,rgba(0,153,188,.12),transparent 30%),
    #202126!important;
  box-shadow:0 30px 80px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.p5-space-grid{opacity:.55}
.space-card{border-radius:22px!important;border-color:rgba(255,255,255,.16)!important;box-shadow:0 20px 42px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.08)!important}
.space-card>div{background:linear-gradient(transparent,rgba(13,14,17,.92))!important;backdrop-filter:blur(2px)}
.space-card:hover{border-color:rgba(107,184,245,.62)!important;box-shadow:0 28px 60px rgba(0,0,0,.42),0 0 0 1px rgba(107,184,245,.20)!important}
.space-tag{border-radius:999px!important;box-shadow:0 6px 22px rgba(0,0,0,.24);font-family:var(--fluent-font)!important;font-weight:650}
.space-tag--b{background:linear-gradient(90deg,var(--fx-blue),var(--fx-purple))!important;color:#fff!important;border:0!important}
.space-orbit{box-shadow:0 0 70px rgba(40,134,222,.08)}

/* Photo / roll controls as Fluent disclosure cards */
.photo{background:linear-gradient(180deg,#f8f9fb,#f3f6fa 72%,#f8f8f8)!important}
.photo-rolls-head{border-top:0!important;padding:12px 14px!important;border:1px solid var(--fx-border)!important;border-radius:14px;background:rgba(255,255,255,.58);box-shadow:var(--fluent-shadow-2)}
.live-roll{border-bottom:0!important}
.live-roll-head{
  padding:14px 14px!important;border:1px solid var(--fx-border)!important;border-radius:14px!important;
  background:rgba(255,255,255,.70)!important;box-shadow:var(--fluent-shadow-2);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease,border-color .18s ease!important;
}
.live-roll-head:hover{background:#fff!important;box-shadow:var(--fx-float-shadow);border-color:rgba(15,108,189,.16)!important;transform:translateY(-1px)}
.live-roll-icon{border-radius:9px!important;border-color:rgba(0,0,0,.08)!important;background:rgba(15,108,189,.06)!important;color:var(--fx-blue)!important}
.live-roll-head:hover .live-roll-icon{background:var(--fx-blue)!important;color:#fff!important}
.frame-art{border-radius:22px!important;border-color:rgba(0,0,0,.08)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important;transition:box-shadow .25s ease,border-color .25s ease!important}
.frame:hover .frame-art{box-shadow:0 18px 42px rgba(0,0,0,.15)!important;border-color:rgba(15,108,189,.20)!important}
.frame-index{padding:5px 8px!important;border-radius:7px!important;backdrop-filter:blur(12px);font-family:var(--fluent-font)!important;font-weight:700}
.section-actions--client-work a{display:inline-flex;align-items:center;padding:10px 13px;border:1px solid rgba(15,108,189,.14)!important;border-radius:9px;background:rgba(15,108,189,.06);font-family:var(--fluent-font);font-weight:650}
.section-actions--client-work a:hover{background:rgba(15,108,189,.11)}

/* Motion — Fluent dark cards */
.motion{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 8% 16%,rgba(40,134,222,.15),transparent 26%),
    radial-gradient(circle at 92% 46%,rgba(91,95,199,.13),transparent 29%),
    linear-gradient(180deg,#17181c,#202126 56%,#18191d)!important;
}
.motion-top{border-top:0!important;padding:12px 14px!important;border:1px solid var(--fx-border-dark)!important;border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(14px)}
.rec{padding:5px 9px;border-radius:999px;background:rgba(16,124,16,.12);border:1px solid rgba(107,203,95,.15)}
.motion-cut-media{border-radius:22px!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 16px 38px rgba(0,0,0,.30)!important;transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease!important}
.motion-cut:hover .motion-cut-media{transform:translateY(-5px);box-shadow:0 28px 64px rgba(0,0,0,.40)!important;border-color:rgba(107,184,245,.32)!important}
.motion-cut-play{border-radius:999px!important;background:rgba(248,249,252,.88)!important;backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(0,0,0,.22)!important;font-family:var(--fluent-font)!important;font-weight:700!important}
.motion-cut-caption small,.motion-cut-meta{font-family:var(--fluent-font)!important;letter-spacing:.025em!important}
.motion-bottomline a{display:inline-flex;padding:8px 11px;border:1px solid rgba(107,184,245,.22)!important;border-radius:8px;background:rgba(107,184,245,.07)}

/* Digital — turn showcases into Fluent app windows */
.digital-service-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fafc,#f2f5f9)!important}
.digital-service-section--uiux{background:linear-gradient(180deg,#f3f5fb,#f8f9fc)!important}
.discipline-index{
  border:1px solid var(--fx-border)!important;border-radius:18px!important;padding:14px!important;
  background:rgba(255,255,255,.70)!important;box-shadow:var(--fluent-shadow-4)!important;
}
.discipline-index span{color:var(--fx-blue)}
.digital-service-section--uiux .discipline-index span{color:var(--fx-purple)}
.discipline-services{gap:7px!important;border:0!important;background:transparent!important}
.discipline-services span{
  border:1px solid rgba(0,0,0,.075)!important;border-radius:999px!important;
  background:rgba(255,255,255,.68);box-shadow:0 1px 2px rgba(0,0,0,.035);
  font-family:var(--fluent-font)!important;font-weight:600!important;letter-spacing:.035em!important;
}
.digital-showcase{
  border-radius:28px!important;border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,#24252a,#1d1e22)!important;
  box-shadow:0 34px 90px rgba(25,30,42,.22),0 2px 8px rgba(0,0,0,.12)!important;
}
.digital-showcase-top{height:52px!important;border-bottom-color:rgba(255,255,255,.09)!important;background:rgba(255,255,255,.045)!important;backdrop-filter:blur(14px)}
.digital-showcase-browser{border-radius:18px!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 26px 70px rgba(0,0,0,.36)!important;overflow:hidden!important}
.digital-showcase-browserbar{height:44px!important;background:#2c2d33!important;border-bottom-color:rgba(255,255,255,.10)!important;font-family:var(--fluent-font)!important}
.digital-showcase-browserbar i:nth-child(1){background:#f7630c;border:0!important}.digital-showcase-browserbar i:nth-child(2){background:#ffb900;border:0!important}.digital-showcase-browserbar i:nth-child(3){background:#107c10;border:0!important}
.digital-showcase-cta{border-radius:10px!important;padding:12px 14px!important;background:rgba(255,255,255,.055);font-family:var(--fluent-font)!important;font-weight:650!important}
.digital-showcase:hover .digital-showcase-cta{background:rgba(107,184,245,.10)}
.digital-discipline-break{background:linear-gradient(90deg,#16171b,#22232a)!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(255,255,255,.06)}
.digital-discipline-break b{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple));color:#fff!important;box-shadow:0 7px 18px rgba(15,108,189,.20)}

/* Process — Fluent cards, still the same three columns */
.process{background:linear-gradient(180deg,#f8f9fb,#f3f6f9)!important}
.process-grid{gap:14px!important;border-top:0!important}
.process-grid article{
  position:relative;padding:26px 28px 72px!important;border:1px solid var(--fx-border)!important;border-radius:22px!important;
  background:rgba(255,255,255,.70);box-shadow:var(--fluent-shadow-2);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.process-grid article+article{padding-left:28px!important}
.process-grid article:hover{transform:translateY(-4px);box-shadow:var(--fx-float-shadow);border-color:rgba(15,108,189,.16)!important}
.process-grid article::after{content:"";position:absolute;width:100px;height:100px;right:-38px;top:-38px;border-radius:32px;background:linear-gradient(135deg,rgba(40,134,222,.10),rgba(91,95,199,.08));transform:rotate(18deg)}
.process-grid article:nth-child(2)::after{background:linear-gradient(135deg,rgba(91,95,199,.12),rgba(135,100,184,.07))}
.process-grid article:nth-child(3)::after{background:linear-gradient(135deg,rgba(0,153,188,.12),rgba(16,124,16,.06))}
.process-grid article>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(15,108,189,.08);font-family:var(--fluent-font)!important;font-weight:750!important}

/* Contact — expressive, playful Fluent landing surface */
.contact{
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 88% 18%,rgba(91,95,199,.19),transparent 28%),
    radial-gradient(circle at 10% 88%,rgba(0,153,188,.12),transparent 28%),
    linear-gradient(140deg,#eef6ff,#f6f2ff 58%,#eefbfc)!important;
}
.contact::before{content:"";position:absolute;right:6%;bottom:-120px;width:300px;height:300px;border-radius:82px;background:linear-gradient(135deg,rgba(15,108,189,.08),rgba(135,100,184,.10));transform:rotate(23deg);pointer-events:none}
.contact>.eyebrow{border-top:1px solid rgba(15,108,189,.13)!important}
.contact h2 span{-webkit-text-stroke:0!important;color:transparent!important;background:linear-gradient(90deg,var(--fx-blue),var(--fx-purple),var(--fx-cyan));-webkit-background-clip:text;background-clip:text}
.contact-grid>div:first-child{
  padding:24px;border:1px solid rgba(0,0,0,.075);border-radius:22px;background:rgba(255,255,255,.48);backdrop-filter:blur(16px);box-shadow:var(--fluent-shadow-2)
}
.contact-big{
  border:1px solid rgba(15,108,189,.12)!important;border-radius:18px!important;padding:22px 22px!important;
  background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important;color:#fff!important;
  box-shadow:0 14px 32px rgba(15,108,189,.20)!important;transition:transform .2s ease,box-shadow .2s ease!important;
}
.contact-big:hover{color:#fff!important;transform:translateY(-3px);box-shadow:0 20px 44px rgba(15,108,189,.27)!important}
.contact-actions>a{
  display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid rgba(0,0,0,.075);border-radius:11px;
  background:rgba(255,255,255,.58);color:#33485d!important;box-shadow:0 1px 2px rgba(0,0,0,.035);transition:.18s ease;
}
.contact-actions>a:hover{background:#fff;color:var(--fx-blue)!important;transform:translateX(3px)}

/* Analog escape — dark Mica card */
.escape{background:linear-gradient(180deg,#191a1e,#202126)!important}
.analog-exit{
  border-radius:24px!important;border-color:rgba(255,255,255,.12)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
  box-shadow:0 20px 50px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px);
}
.analog-exit::after{content:"";position:absolute;right:22px;top:22px;width:12px;height:12px;border-radius:4px;background:var(--fx-orange);box-shadow:-18px 0 0 var(--fx-purple),-36px 0 0 var(--fx-blue);z-index:3}
.analog-exit:before{background:linear-gradient(135deg,#eff7ff,#f5f0ff)!important}

/* Footer — compact Fluent status area */
.footer{
  background:rgba(250,251,253,.86)!important;border-top-color:rgba(0,0,0,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.footer-brand strong{display:inline-flex;align-items:center;gap:8px;font-family:var(--fluent-font);font-weight:750}
.footer-brand strong::before{content:"";width:9px;height:9px;border-radius:3px;background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))}
.footer-legal{border-top-color:rgba(0,0,0,.075)!important}
.footer-legal a,.footer-legal button{border-radius:8px!important;transition:background .16s ease,color .16s ease!important}
.footer-legal a:hover,.footer-legal button:hover{background:rgba(15,108,189,.07)!important}
.footer-legal a+button,.footer-legal button+button{border-left:0!important;margin-left:4px}

/* Fluent 2 dialogs / form controls */
.legal-modal,.project-modal{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,249,252,.96))!important}
.legal-modal{border-radius:24px!important;border-color:rgba(0,0,0,.10)!important;box-shadow:0 32px 90px rgba(0,0,0,.24)!important}
.project-modal-shell{background:radial-gradient(circle at 92% 3%,rgba(91,95,199,.08),transparent 24%)}
.project-type{margin:8px;border:1px solid rgba(0,0,0,.08)!important;border-radius:18px;background:rgba(255,255,255,.66)!important;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:.18s ease!important}
.project-type:hover,.project-type.is-active{background:linear-gradient(135deg,rgba(15,108,189,.10),rgba(91,95,199,.08))!important;color:var(--fluent-text)!important;border-color:rgba(15,108,189,.18)!important;box-shadow:var(--fluent-shadow-4)}
.project-grid>label{margin:4px 0;padding:18px 18px!important;border:1px solid rgba(0,0,0,.07)!important;border-radius:14px!important;background:rgba(255,255,255,.55)}
.project-grid>label:nth-child(even){padding-left:18px!important;padding-right:18px!important}
.project-grid>label.project-wide{padding-left:18px!important;padding-right:18px!important}
.project-grid{gap:10px!important;border-top:0!important}
.project-form input[type=text],.project-form input[type=email],.project-form select,.project-form textarea{padding:10px 11px!important;border:1px solid var(--fluent-stroke)!important;border-radius:9px!important;background:#fff!important;font-size:clamp(16px,1.5vw,22px)!important;font-weight:550!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.03)}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:var(--fx-blue)!important;box-shadow:0 0 0 2px rgba(15,108,189,.14)!important}
.project-choices{border:0!important;border-radius:16px;background:rgba(255,255,255,.45);padding:18px!important}
.project-choices label span{border-radius:999px!important;background:#fff!important}
.project-submit button{border-radius:16px!important;background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important;box-shadow:0 12px 28px rgba(15,108,189,.20)!important}
.modal-close,.project-close{border-radius:12px!important;background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important}

/* Interaction layer becomes a tiny Fluent tool palette */
.p5-interaction-rail{
  padding:5px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(255,255,255,.70);
  box-shadow:var(--fx-float-shadow);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)
}
.p5-interaction-trigger{border-radius:9px!important;border:0!important;background:transparent!important;opacity:.82!important;color:#3d4854!important}
.p5-interaction-trigger:hover{background:rgba(15,108,189,.08)!important;color:var(--fx-blue)!important}
.p5-interaction-trigger[aria-pressed="true"]{background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important;color:#fff!important}

/* Cookie surfaces */
.p5-cookie-banner{border-radius:22px!important;border:1px solid rgba(0,0,0,.08)!important;background:rgba(255,255,255,.90)!important;box-shadow:0 24px 70px rgba(0,0,0,.17)!important;backdrop-filter:blur(26px) saturate(170%)!important}
.p5-cookie-btn{border-radius:10px!important}
.p5-cookie-btn--primary{background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important}

@media(max-width:900px){
  .topbar::before{inset:7px 8px;border-radius:14px}
  .hero-meta{gap:6px!important}
  .hero-meta span{font-size:8px;padding:6px 8px}
  .manifesto-grid>div{padding:24px}
  .process-grid{gap:10px!important}
  .process-grid article,.process-grid article+article{padding:22px 20px 54px!important}
  .digital-showcase{border-radius:22px!important}
  .contact-grid>div:first-child{padding:20px}
  .project-type{margin:5px}
}

@media(max-width:640px){
  body{background-attachment:scroll}
  .topbar::before{inset:6px 7px}
  .brand-main:before{width:10px;height:10px;box-shadow:9px 0 0 -3px rgba(0,153,188,.85),0 9px 0 -3px rgba(247,99,12,.72)}
  .hero::before{width:72vw;height:72vw;right:-34vw;top:18%}.hero::after{width:130px;height:130px;left:-25px;bottom:13%}
  .hero-meta{display:grid!important;grid-template-columns:max-content max-content;justify-content:start!important}
  .hero-meta span:nth-child(2){grid-column:1/-1;grid-row:2}.hero-meta span:nth-child(3){grid-column:2;grid-row:1}
  .hero-bottom p{padding:14px 15px;border-radius:14px}
  .circle-cta{border-radius:22px!important}
  .eyebrow{font-size:8px!important;padding:5px 8px}
  .manifesto-grid>div{padding:20px;border-radius:18px}
  .p5-space-stage{border-radius:22px!important}
  .space-card{border-radius:16px!important}
  .photo-rolls-head{border-radius:12px;padding:11px 12px!important}
  .live-roll-head{border-radius:12px!important;padding:12px!important}
  .frame-art{border-radius:17px!important}
  .motion-cut-media{border-radius:17px!important}
  .digital-showcase{border-radius:18px!important}
  .digital-showcase-browser{border-radius:14px!important}
  .discipline-services{gap:5px!important}.discipline-services span{padding:9px 10px!important;font-size:7px!important}
  .process-grid{gap:9px!important}.process-grid article,.process-grid article+article{padding:20px 18px 46px!important;border-radius:17px!important}
  .contact-grid>div:first-child{border-radius:17px}.contact-big{border-radius:14px!important;padding:18px!important}.contact-actions>a{border-radius:9px}
  .analog-exit{border-radius:18px!important}
  .footer-legal a+button,.footer-legal button+button{margin-left:0!important}
  .project-grid{grid-template-columns:1fr!important}.project-grid>label{grid-column:1/-1!important;padding:15px!important}.project-grid>label:nth-child(even){padding:15px!important}
}

@media(prefers-reduced-motion:reduce){
  .nav a,.clientwork-link,.live-roll-head,.frame-art,.motion-cut-media,.process-grid article,.contact-big,.contact-actions>a{transition:none!important;transform:none!important}
}

/* Mobile navigation, notifications and Behind P5 — Fluent Max */
.mobile-menu{
  background:
    radial-gradient(circle at 88% 14%,rgba(91,95,199,.14),transparent 28%),
    radial-gradient(circle at 12% 78%,rgba(0,153,188,.10),transparent 26%),
    rgba(247,249,252,.97)!important;
  color:var(--fluent-text)!important;
  backdrop-filter:blur(32px) saturate(180%)!important;-webkit-backdrop-filter:blur(32px) saturate(180%)!important;
}
.mobile-menu a{border:1px solid rgba(0,0,0,.07)!important;border-radius:14px!important;padding:12px 14px!important;background:rgba(255,255,255,.62);box-shadow:0 1px 2px rgba(0,0,0,.03);font-family:var(--fluent-font)!important}
.mobile-menu a:hover{background:rgba(15,108,189,.08);color:var(--fx-blue)}
.idle-message{border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important;background:rgba(31,32,37,.92)!important;box-shadow:0 24px 60px rgba(0,0,0,.28)!important;backdrop-filter:blur(22px)!important}
.idle-message span,.idle-message strong{font-family:var(--fluent-font)!important}
.p5-page-peel-handle{border-radius:18px 0 0 0!important;background:linear-gradient(135deg,var(--fx-blue),var(--fx-purple))!important;box-shadow:-8px -8px 28px rgba(15,108,189,.20)!important}
.p5-page-peel-layer{
  background:
    radial-gradient(circle at 85% 12%,rgba(91,95,199,.23),transparent 27%),
    radial-gradient(circle at 12% 84%,rgba(0,153,188,.14),transparent 29%),
    linear-gradient(145deg,#17181d,#23242a)!important;
}
.p5-page-peel-head{border-top:0!important;padding:12px 14px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:18px;background:rgba(255,255,255,.055);backdrop-filter:blur(18px)}
.p5-page-peel-head h2 span{color:transparent!important;background:linear-gradient(90deg,#6cb8f5,#a98bdb);-webkit-background-clip:text;background-clip:text}
.p5-page-peel-close{border-radius:12px!important;background:rgba(255,255,255,.07)!important}
.p5-page-peel-nav{gap:10px!important;border:0!important}
.p5-page-peel-nav>a,.p5-page-peel-nav>button{border:1px solid rgba(255,255,255,.11)!important;border-radius:18px!important;background:rgba(255,255,255,.055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.p5-page-peel-nav>a:hover,.p5-page-peel-nav>button:hover{background:rgba(255,255,255,.92)!important;color:#242424!important;transform:translateY(-2px)}
.p5-page-peel-copy{border-bottom-color:rgba(255,255,255,.10)!important}
.p5-reveal-lens{border-radius:28px!important;border-color:rgba(15,108,189,.34)!important;box-shadow:0 18px 50px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.60)!important;background:rgba(255,255,255,.70)!important;backdrop-filter:blur(18px) saturate(160%)!important}
.p5-reveal-readout b{color:var(--fx-blue)!important}
.p5-reveal-cross{background:rgba(15,108,189,.55)!important}
.p5-reveal-target{outline-color:rgba(15,108,189,.85)!important}

@media(max-width:900px){
  .mobile-menu{gap:8px!important;padding-top:82px!important}
  .mobile-menu a{font-size:clamp(29px,8.7vw,58px)!important}
}


/* =========================================================
   FLUENT MAX FINAL CLEANUP — centered legal nav, no R/L rail
   ========================================================= */
.p5-interaction-rail{display:none!important}
.footer-legal{
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
.footer-legal a,.footer-legal button{
  justify-content:center!important;
  padding:7px 11px!important;
  margin:0!important;
  width:auto!important;
  min-height:30px!important;
}
.footer-legal a:first-child{padding-left:11px!important}
.footer-legal a+button,.footer-legal button+button{
  border-left:0!important;
  border-top:0!important;
  margin-left:0!important;
}
@media(max-width:720px){
  .footer{padding-bottom:34px!important}
  .footer-legal{justify-content:center!important;align-items:center!important;flex-direction:row!important;gap:4px!important}
  .footer-legal a,.footer-legal button{padding:7px 9px!important;font-size:9px!important;width:auto!important}
}
@media(max-width:420px){
  .footer-legal{justify-content:center!important;align-items:center!important;flex-direction:row!important;gap:2px!important}
  .footer-legal a,.footer-legal button{padding:7px 7px!important;font-size:8.5px!important;width:auto!important}
}

/* =========================================================
   FLUENT MAX — COMPACT MOBILE COMMAND FLYOUT
   Keep the desktop navigation untouched. On phones/tablets,
   the menu behaves like a compact Fluent command flyout rather
   than a full-screen overlay.
   ========================================================= */
@media (max-width:900px){
  .mobile-menu{
    inset:66px 12px auto auto!important;
    width:min(300px,calc(100vw - 24px))!important;
    height:auto!important;
    max-height:calc(100svh - 80px)!important;
    overflow:auto!important;
    padding:9px!important;
    gap:5px!important;
    border:1px solid rgba(0,0,0,.09)!important;
    border-radius:20px!important;
    background:
      radial-gradient(circle at 92% 4%,rgba(91,95,199,.10),transparent 34%),
      radial-gradient(circle at 6% 94%,rgba(0,153,188,.08),transparent 32%),
      rgba(250,251,253,.94)!important;
    box-shadow:0 22px 56px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.06)!important;
    backdrop-filter:blur(30px) saturate(180%)!important;
    -webkit-backdrop-filter:blur(30px) saturate(180%)!important;
    transform:translateY(-10px) scale(.975)!important;
    transform-origin:top right!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .22s!important;
  }
  .mobile-menu.is-open{
    transform:translateY(0) scale(1)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .mobile-menu a{
    min-height:39px!important;
    display:flex!important;
    align-items:center!important;
    padding:9px 11px!important;
    border-radius:11px!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:620!important;
    letter-spacing:-.01em!important;
    border:1px solid transparent!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus-visible{
    background:rgba(15,108,189,.08)!important;
    border-color:rgba(15,108,189,.10)!important;
  }
  .mobile-menu a:last-child{
    margin-top:3px!important;
    color:var(--fx-blue)!important;
    background:rgba(15,108,189,.07)!important;
    border-color:rgba(15,108,189,.10)!important;
  }
}
@media (max-width:420px){
  .mobile-menu{
    inset:62px 10px auto auto!important;
    width:min(286px,calc(100vw - 20px))!important;
    border-radius:18px!important;
    padding:8px!important;
  }
  .mobile-menu a{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:13.5px!important;
  }
}