@font-face{font-family:'Fira Code';src:url('fonts/fira-code-latin.woff2') format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
/* MSCodes identity: original logos and Fira Code are deliberate brand assets. */
:root{
  --ground:#0f171e;--footer-ground:#080f14;--surface:#18242e;
  --ink:#f5f9fc;--muted:#b4c5d1;--accent:#2ede8d;--azure:#007ffb;--yellow:#ffff00;
  --font-display:'Fira Code',monospace;--font-text:'Fira Code',monospace;
  --gutter:clamp(20px,2.2vw,40px);--body:17px;--small:14px;--lead:20px;--heading:clamp(32px,3.4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
}
body,.editor-styles-wrapper{font-family:var(--font-text);font-size:var(--body);line-height:1.65;background:var(--ground);color:var(--ink)}
h1,h2,h3{font-weight:500;letter-spacing:-.035em;line-height:1.15}
p{line-height:1.65}
a,button{transition:color 160ms var(--ease),background-color 160ms var(--ease),opacity 160ms var(--ease)}
a:focus-visible,button:focus-visible{outline-color:var(--accent)}
.site-header{min-height:96px}
.brand-signature{display:block;width:190px;height:auto;margin:0}
.brand-signature img{display:block;width:100%;height:auto}
.site-header .brand-signature a{display:block}
.site-nav,.site-header .wp-block-navigation{font-size:16px;line-height:1.5}
.site-nav a:hover,.site-header .wp-block-navigation a:hover{color:var(--accent)}
.button,.wp-block-button__link{background:var(--accent);color:var(--ground);font-size:16px;font-weight:500;padding:16px 24px;min-height:56px}
.button:hover,.wp-block-button__link:hover{background:var(--ink);color:var(--ground);transform:none}

/* Complete brand signature, without WebGL or replay controls. */
.ms-brand-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center;min-height:calc(84svh - 96px);padding-top:64px;padding-bottom:80px}
.ms-brand-hero>*{min-width:0}
.ms-brand-hero .hero-summary{display:block}
.ms-brand-hero .hero-summary h1{font-size:clamp(40px,3.4vw,56px);line-height:1.08;letter-spacing:-.04em;max-width:16ch;margin-bottom:24px;text-wrap:initial}
.ms-brand-hero .hero-summary p{font-size:var(--body);line-height:1.7;max-width:44ch;color:var(--muted)}
.ms-brand-hero .hero-summary .button{margin-top:32px}
.hero-brand{display:flex;align-items:center;justify-content:center}
.hero-brand img{display:block;width:100%;height:auto}

.section{padding-top:112px;padding-bottom:112px}
.intro{background:var(--surface);color:var(--ink);grid-template-columns:1fr 1fr;gap:48px}
.intro>p{font-size:var(--lead);max-width:42ch;color:var(--muted)}
.intro .services{gap:48px;padding-top:32px}
.services>div{flex:1;min-width:0}
.services h3{font-size:var(--lead);letter-spacing:0}
.services>div p{font-size:var(--body);max-width:32ch;color:var(--muted);margin-top:16px}
.services>div:nth-child(2){padding-top:0}
.work-title{align-items:baseline;margin-bottom:64px}
.work-title h2{max-width:18ch}
.work-title a{font-size:var(--small)}
.work-index{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:start}
.work-links{gap:40px}
.work-choice .work-name{font-size:clamp(32px,3.4vw,48px);letter-spacing:-.035em;line-height:1.2}
.work-choice .work-type{font-size:var(--small);line-height:1.6;max-width:38ch;margin-top:12px;color:var(--muted)}
.work-choice{color:var(--ink)}
.work-choice[data-preview-active=true],.work-choice:hover{color:var(--accent);transform:none}
.project-preview{background:transparent;padding:0}
.project-preview img{aspect-ratio:1.4;object-fit:cover;object-position:top}
.project-preview p{font-size:var(--body);color:var(--muted);max-width:48ch;margin-top:24px}
.project-preview a{font-size:var(--small);margin-top:16px}
.work-title a,.project-preview a,.project-row a,.contact-email a{color:var(--ink)}
.work-title a:hover,.project-preview a:hover,.project-row a:hover,.contact-email a:hover{color:var(--accent)}
.contact-band{background:var(--surface);color:var(--ink);grid-template-columns:1fr 1fr;gap:64px}
.contact-band p{font-size:var(--lead);max-width:40ch;color:var(--muted)}
.contact-band .button,.contact-band .wp-block-button__link{background:var(--accent);color:var(--ground);margin-top:32px}
.contact-band .button:hover,.contact-band .wp-block-button__link:hover{background:var(--ink);color:var(--ground)}
.site-footer{background:var(--footer-ground);color:var(--ink);padding-top:48px;padding-bottom:48px}
.footer-top{font-size:var(--small);gap:48px;align-items:baseline}
.footer-top p{max-width:48ch;color:var(--muted)}
.footer-top a{color:var(--ink)}
.footer-top a:hover{color:var(--accent)}
.footer-brand{display:block;margin-top:24px;width:160px;max-width:100%}
.footer-brand img{width:100%;height:auto}
.skip-link{color:var(--ground)}

.page-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:80px;padding-bottom:80px}
.page-heading h1{font-size:clamp(48px,6.5vw,96px);line-height:1.08;letter-spacing:-.05em}
.page-heading p{font-size:var(--lead);max-width:38ch;color:var(--muted)}
.project-list{padding-bottom:112px}
.project-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px;margin-top:80px}
.project-row h2{font-size:var(--heading)}
.project-row p{font-size:var(--body);color:var(--muted)}
.project-row .project-status{color:var(--muted);font-size:var(--small);margin-top:16px}
.project-row a{font-size:var(--small)}
.project-filters{gap:12px;margin-bottom:48px}
.project-filters button{font-size:var(--small);min-height:48px;padding:12px 20px}
.project-filters button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
.project-filters button:hover{background:var(--muted);color:var(--ground)}
.contact-page{gap:64px;padding-bottom:112px;align-items:start}
.contact-page h2{font-size:clamp(24px,2.4vw,32px)}
.contact-page a{font-size:clamp(22px,2.6vw,36px);letter-spacing:0;margin-top:16px}
.contact-note{background:var(--surface)}
.contact-note h2{margin-bottom:24px}
.contact-note p,.contact-note li{font-size:var(--body);line-height:1.65;color:var(--muted)}
.contact-note li{margin-top:16px}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--ground);color:var(--ink)}
.wp-block-navigation__responsive-container.is-menu-open a{color:var(--ink)}
.intro ::selection,.contact-band ::selection{background:var(--ink);color:var(--ground)}

@media(max-width:1100px){
  .ms-brand-hero{gap:40px}
  .ms-brand-hero .hero-summary h1{font-size:40px}
  .intro,.contact-band,.work-index,.project-row{gap:40px}
  .intro .services{gap:24px}
  .work-choice .work-name{font-size:36px}
}
@media(max-width:900px){
  .ms-brand-hero{grid-template-columns:1fr;min-height:0;gap:48px;padding-top:48px;padding-bottom:64px}
  .ms-brand-hero .hero-summary h1{max-width:20ch}
  .hero-brand{max-width:640px;width:100%;justify-self:center}
}
@media(max-width:800px){
  .intro,.contact-band,.page-heading,.contact-page{grid-template-columns:1fr;gap:32px}
  .intro>p{max-width:56ch}
  .page-heading p{margin-top:0;max-width:50ch}
  .page-heading{padding-top:48px;padding-bottom:64px}
  .work-index{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px}
}
@media(max-width:600px){
  :root{--heading:32px;--lead:18px}
  .ms-brand-hero{padding-top:40px;padding-bottom:48px;gap:40px}
  .ms-brand-hero .hero-summary h1{font-size:32px;max-width:18ch;line-height:1.12}
  .ms-brand-hero .hero-summary .button{margin-top:24px}
  .site-header{min-height:80px}
  .brand-signature{width:168px}
  .site-nav{font-size:14px;gap:16px}
  .section{padding-top:64px;padding-bottom:64px}
  .intro .services{display:grid;grid-template-columns:1fr;gap:32px;padding-top:8px}
  .services h3{font-size:20px}
  .services>div p{max-width:36ch;margin-top:12px}
  .work-title{display:block;margin-bottom:32px}
  .work-title a{font-size:14px;margin-top:16px}
  .work-index{display:block}
  .work-links{gap:48px}
  .work-choice .work-name{font-size:32px}
  .work-choice .work-type{font-size:14px;margin-top:8px}
  .mobile-project-image{aspect-ratio:1.4;margin-bottom:20px}
  .contact-band{gap:24px}
  .contact-band .wp-block-button__link{margin-top:24px}
  .footer-top{display:grid;gap:16px;font-size:14px}
  .footer-top p+p{margin-top:0}
  .footer-brand{margin-top:24px}
  .page-heading h1{font-size:clamp(36px,8.9vw,48px);letter-spacing:-.04em}
  .page-heading p{font-size:18px}
  .project-list{padding-bottom:64px}
  .project-filters{gap:8px;margin-bottom:32px}
  .project-filters button{padding:12px;font-size:14px}
  .project-row{grid-template-columns:1fr;gap:24px;margin-top:48px}
  .project-row .project-copy{padding:0}
  .project-row h2{font-size:32px}
  .contact-page{padding-bottom:64px}
  .contact-page a{font-size:clamp(20px,5.6vw,28px)}
  .contact-note{padding:24px!important}
}
@media(prefers-reduced-motion:reduce){a,button{transition:none}}