/* =========================================================
   MA® Design System v0.1 — base layer
   Tokens · fonts · reset · buttons · header · loader · footer
   ========================================================= */

@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/space-grotesk-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
	/* colour */
	--ink:#090909;
	--ink-2:#111111;
	--paper:#F2F0EA;
	--acid:#C7FF35;
	--mute:#777777;
	--mute-2:#9A9A96;      /* secondary text on black */
	--mute-paper:#5C5C58;  /* secondary text on off white */
	--line:rgba(242,240,234,.14);
	--line-strong:rgba(242,240,234,.32);

	/* type */
	--f-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
	--f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
	--f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
	--t-xl:clamp(2.5rem,5.5vw,5rem);
	--t-l:clamp(1.625rem,3vw,2.5rem);
	--t-m:clamp(1.25rem,1.8vw,1.5rem);
	--t-body:1.0625rem;
	--t-label:.75rem;

	/* grid */
	--cols:4;
	--gutter:16px;
	--margin:max(16px,env(safe-area-inset-left,0px));
	--header-h:64px;

	/* motion */
	--expo:cubic-bezier(.16,1,.3,1);
	--inout:cubic-bezier(.77,0,.18,1);

	color-scheme:dark;
}
@media (min-width:768px){:root{--cols:8;--gutter:20px;--margin:32px;--header-h:72px}}
@media (min-width:1200px){:root{--cols:12;--gutter:24px;--margin:clamp(48px,3.33vw,72px);--header-h:80px}}

/* reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:200;background:var(--acid);color:var(--ink);padding:10px 14px;font-family:var(--f-mono);font-size:12px;text-transform:uppercase}

/* type helpers */
.label{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 22px;font-family:var(--f-display);font-weight:600;font-size:15px;border:1px solid var(--paper);color:var(--paper);overflow:hidden;isolation:isolate;transition:color .5s var(--expo)}
.btn::before{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(101%);transition:transform .5s var(--expo);z-index:-1}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:none}
.btn--pri{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.btn--pri:hover{color:var(--ink)}
.btn--sm{height:40px;padding:0 16px;font-size:13px;gap:10px}
.btn__ar{font-family:var(--f-mono);font-weight:400;transition:transform .5s var(--expo)}
.btn:hover .btn__ar{transform:translate(3px,-3px)}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--header-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--margin) 0;display:flex;align-items:center;gap:32px;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.site-header.is-scrolled{background:rgba(9,9,9,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--line)}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:-.06em;line-height:1}
.brand sup{font-size:.42em;letter-spacing:0;margin-left:.08em;vertical-align:top;position:relative;top:.1em}
.site-nav{margin-left:auto}
.site-nav .menu{display:flex;gap:28px}
.site-nav a,.site-nav__work{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;position:relative;padding-block:6px;display:inline-flex;align-items:center;gap:6px}
.site-nav a::after,.site-nav__work::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acid);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--expo)}
.site-nav a:hover,.site-nav__work:hover,.site-nav__work[aria-expanded="true"],.site-nav__work.is-current{color:var(--acid)}
.site-nav a:hover::after,.site-nav__work:hover::after,.site-nav__work[aria-expanded="true"]::after{transform:scaleX(1);transform-origin:left}
.site-nav__caret{display:inline-block;transition:transform .5s var(--expo)}
.site-nav__work[aria-expanded="true"] .site-nav__caret{transform:rotate(45deg)}
.burger{display:none;width:40px;height:40px;margin-left:auto;position:relative;z-index:61}
.burger__l{position:absolute;left:8px;right:8px;height:2px;background:var(--paper);transition:transform .5s var(--expo),top .5s var(--expo)}
.burger__l:nth-child(1){top:15px}
.burger__l:nth-child(2){top:23px}
.burger[aria-expanded="true"] .burger__l:nth-child(1){top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__l:nth-child(2){top:19px;transform:rotate(-45deg)}
@media (max-width:899px){
	.site-nav,.site-header__cta{display:none}
	.burger{display:block}
}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:49;background:var(--ink);padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px) var(--margin) calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:32px;overflow-y:auto}
.mobile-menu .menu{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mobile-menu .menu a{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(32px,9vw,48px);letter-spacing:-.05em;line-height:1;text-transform:uppercase;padding-block:14px;border-bottom:1px solid var(--line)}
.mobile-menu .menu a:active,.mobile-menu .menu a:hover{color:var(--acid)}
.mobile-menu__cta{justify-content:space-between;width:100%}
html.menu-open{overflow:hidden}
.mobile-menu__k{color:var(--acid);margin-bottom:10px}
.mobile-menu__services{border-top:1px solid var(--line);margin-bottom:28px}
.mobile-menu__services a{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:baseline;font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.2;padding-block:12px;border-bottom:1px solid var(--line)}
.mobile-menu__services a span{font-family:var(--f-mono);font-size:11px;color:var(--mute-2);font-weight:400}
.mobile-menu__services a:hover,.mobile-menu__services a:active{color:var(--acid)}

/* services mega menu (desktop) */
.mega{position:fixed;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:48;background:var(--ink);border-block:1px solid var(--line);max-height:calc(100vh - var(--header-h));overflow-y:auto}
.mega__inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);padding:40px var(--margin) 48px}
.mega__side{grid-column:1/span 3;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.mega__k{color:var(--acid)}
.mega__lede{color:var(--mute-2);font-size:15px;max-width:26ch}
.mega__all{margin-top:8px}
.mega__list{grid-column:5/-1;border-top:1px solid var(--line)}
.mega__item{display:grid;grid-template-columns:48px 1fr auto 32px;gap:16px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--line);transition:padding .5s var(--expo),color .3s}
.mega__i{font-family:var(--f-mono);font-size:12px;color:var(--mute-2)}
.mega__name{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.1vw,34px);letter-spacing:-.03em;line-height:1.05;text-transform:uppercase}
.mega__count{font-family:var(--f-mono);font-size:12px;color:var(--mute-2);font-variant-numeric:tabular-nums}
.mega__ar{font-family:var(--f-mono);color:var(--acid);opacity:0;transform:translate(-8px,8px);transition:opacity .3s,transform .5s var(--expo)}
.mega__item:hover,.mega__item:focus-visible,.mega__item.is-current{color:var(--acid);padding-left:12px}
.mega__item:hover .mega__ar,.mega__item:focus-visible .mega__ar,.mega__item.is-current .mega__ar{opacity:1;transform:none}
.mega-scrim{position:fixed;inset:0;z-index:47;background:rgba(9,9,9,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.site-header.is-mega{background:var(--ink);border-color:var(--line)}
@media (max-width:899px){.mega,.mega-scrim{display:none!important}}

/* loader (first visit, once per session) */
.loader{display:none}
.has-loader .loader{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:ma-loader-failsafe 0s 5s forwards}
.loader__bar{position:absolute;left:0;right:0;height:50.5%;background:var(--ink)}
.loader__bar--t{top:0}
.loader__bar--b{bottom:0}
.loader__mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:24px}
.loader__mark{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,8vw,112px);letter-spacing:-.06em;line-height:1;color:var(--paper)}
.loader__mark sup{font-size:.3em;letter-spacing:0;vertical-align:top;position:relative;top:.3em}
.loader__count{font-family:var(--f-mono);font-size:14px;color:var(--acid);letter-spacing:.1em;font-variant-numeric:tabular-nums;align-self:flex-end;padding-bottom:1.2em}
.loader__meta{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.loader__meta--l{left:var(--margin)}
.loader__meta--r{right:var(--margin)}
@keyframes ma-loader-failsafe{to{visibility:hidden}}

/* footer (placeholder until section 6) */
.site-footer{padding:96px var(--margin) calc(32px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.site-footer__wm{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,12.5vw,240px);letter-spacing:-.065em;line-height:.85;text-transform:uppercase;overflow-wrap:anywhere}
.site-footer__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.site-footer__row a:hover{color:var(--acid)}

/* footer columns */
.site-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gutter);margin-bottom:clamp(56px,7vw,112px)}
.site-footer__cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer__cols a{font-family:var(--f-display);font-weight:500;font-size:16px;transition:color .3s;overflow-wrap:anywhere}
.site-footer__cols a:hover{color:var(--acid)}
.site-footer__cols .btn{font-size:14px}
.site-footer__k{color:var(--mute-2);margin-bottom:14px}
.site-footer__top{grid-column:1/-1}
@media (min-width:900px){.site-footer__cols{grid-template-columns:repeat(12,minmax(0,1fr))}.site-footer__cols > div{grid-column:span 3}.site-footer__top{grid-column:span 3;justify-self:end}}

/* floating WhatsApp (appears after the hero, hides near the contact section) */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 15px;background:var(--acid);color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:14px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.35);transform:translateY(140%);transition:transform .6s var(--expo),background .3s}
.wa-float.is-in{transform:none}
.wa-float:hover{background:var(--paper)}
@media (max-width:640px){.wa-float{width:52px;padding:0;justify-content:center}.wa-float__t{display:none}}

/* current section in the header */
.site-nav a.is-active{color:var(--acid)}
.site-nav a.is-active::after{transform:scaleX(1)}

/* ---------- site-wide motion layer ---------- */
.fx-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;background:var(--acid);transform-origin:left;transform:scaleX(0);pointer-events:none}
.fx-curtain{position:fixed;inset:0;z-index:150;background:var(--acid);display:grid;place-items:center;transform:translateY(100%);pointer-events:none}
.fx-curtain__mark{font-family:var(--f-display);font-weight:700;font-size:clamp(64px,10vw,160px);letter-spacing:-.06em;color:var(--ink)}
.fx-curtain__mark sup{font-size:.3em}
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.06em;margin-top:-.06em}
.fx-c{display:inline-block}
.fx-cursor{position:fixed;left:0;top:0;z-index:140;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--acid);mix-blend-mode:difference;pointer-events:none;opacity:0;display:grid;place-items:center;transition:width .35s var(--expo),height .35s var(--expo),margin .35s var(--expo),opacity .3s,background .3s}
.fx-cursor.is-on{opacity:1}
.fx-cursor.is-link{width:36px;height:36px;margin:-18px 0 0 -18px;background:transparent;border:1.5px solid var(--acid)}
.fx-cursor.is-big{width:88px;height:88px;margin:-44px 0 0 -44px;mix-blend-mode:normal;background:var(--acid)}
.fx-cursor__t{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .2s}
.fx-cursor.is-big .fx-cursor__t{opacity:1}
@media (hover:none),(pointer:coarse){.fx-cursor{display:none}}

/* generic pages */
.page-wrap{padding:calc(var(--header-h) + 64px) var(--margin) 96px;max-width:1100px}
.entry__title{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.95;text-transform:uppercase;margin-bottom:40px}
.entry__content{max-width:68ch}
.entry__content a{color:var(--acid)}

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