/* =========================================================
   SUDO brand layer — loaded last on every page.
   Built from the SUDO S symbol and wordmark:
   · accent = the symbol's own solid mint (#00e9a1), no gradients
   · geometry = 45° cuts on diagonally opposite corners (top-left + bottom-right)
   · labels = S symbol + bold condensed caps (as on the SUDO pricelist)
   · separators = "/" ; arrows = the S symbol's cut corner
   ========================================================= */
@property --c{syntax:'<length>';inherits:true;initial-value:12px}
:root{
  --sudo:#00e9a1; --sudo-deep:#00a676; --sudo-ink:#04110b;
  --cyan:#00e9a1; --green:#00e9a1; --mint:#00e9a1;
  --grad:linear-gradient(#00e9a1,#00e9a1); --grad-loop:linear-gradient(#00e9a1,#00e9a1);
  --display:Impact,Anton,"Arial Narrow",sans-serif;
  --ease-sudo:cubic-bezier(.16,1,.3,1);
}
::selection{background:var(--sudo);color:var(--sudo-ink)}

/* ---------- Labels: S symbol + condensed caps (replaces hairline + spaced mono text) ---------- */
.eyebrow,.project-kicker,.project-writeup-label,.portfolio-number,.portfolio-count,.clients-label,
.footer-network-label,.price-list h3,.project-related h2,body.project-detail-page .project-kicker,
body.project-detail-page .project-writeup-label,body.project-detail-page .project-related h2,footer .footer-network-label{
  display:inline-flex!important;align-items:center;gap:.5em;
  font:400 15px/1.1 var(--display)!important;letter-spacing:.02em!important;text-transform:uppercase;
  color:var(--sudo)!important;opacity:1!important;
}
.eyebrow::before,.project-kicker::before,.project-writeup-label::before,.portfolio-number::before,.clients-label::before,
.footer-network-label::before,.price-list h3::before,.project-related h2::before{
  content:"";flex:none;width:1.08em;height:1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22100%20100%20490%20452%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M127.01633%2C182.83487l57.42246-57.42378h367.5069v91.87672h-292.85731l-28.71057%2C28.71189v126.32967h-45.93902l-57.42246-57.42114v-132.07337ZM563.43044%2C469.94848l-57.42246%2C57.42378H127.01633v-91.87804h304.34074l28.71189-28.71057v-126.32967h45.93902l57.42246%2C57.42378v132.07073Z%22%20/%3E%20%20%20%3Ccircle%20cx%3D%22345.22339%22%20cy%3D%22326.39167%22%20r%3D%2245.9377%22%20/%3E%20%20%20%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22100%20100%20490%20452%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M127.01633%2C182.83487l57.42246-57.42378h367.5069v91.87672h-292.85731l-28.71057%2C28.71189v126.32967h-45.93902l-57.42246-57.42114v-132.07337ZM563.43044%2C469.94848l-57.42246%2C57.42378H127.01633v-91.87804h304.34074l28.71189-28.71057v-126.32967h45.93902l57.42246%2C57.42378v132.07073Z%22%20/%3E%20%20%20%3Ccircle%20cx%3D%22345.22339%22%20cy%3D%22326.39167%22%20r%3D%2245.9377%22%20/%3E%20%20%20%3C/svg%3E") center/contain no-repeat;
}
.eyebrow span{display:none}
.portfolio-count{font-size:13px!important;color:#9aa39d!important}
.clients-label{display:flex!important;justify-content:center;color:var(--sudo-ink)!important}
.about .eyebrow{color:var(--sudo-deep)!important}
.eyebrow.dark{color:var(--sudo-ink)!important}
.portfolio-number{font-size:18px!important;display:flex!important}
.portfolio-back{margin-bottom:22px!important}

/* ---------- Buttons: S-cut corners, solid mint ---------- */
.button,.mini-cta,.carousel-btn{
  --c:12px;position:relative;isolation:isolate;border:0!important;border-radius:0!important;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  transition:--c .4s var(--ease-sudo),background-color .25s ease,color .25s ease!important;
}
.button{min-height:50px;padding:0 24px;font:700 12px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase;gap:10px}
.button.primary,.landing .button.primary{background:var(--sudo)!important;color:var(--sudo-ink)!important}
.button.primary:hover,.landing .button.primary:hover{background:#fff!important;color:var(--sudo-ink)!important}
.button:hover,.mini-cta:hover,.carousel-btn:hover:not(:disabled){--c:18px}
/* Outlined variants: a 1px outline that follows the cut corners (even-odd ring). */
.button.ghost,.button.outline,.button.dark-btn,.mini-cta,.carousel-btn{background:transparent!important}
.button.ghost::before,.button.outline::before,.button.dark-btn::before,.mini-cta::before,.carousel-btn::before,
.landing .mini-cta::before{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1;transform:none!important;transition:opacity .25s ease!important;
  background:currentColor!important;opacity:.55;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .42px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - var(--c) - .42px),calc(100% - var(--c) - .42px) calc(100% - 1px),1px calc(100% - 1px),1px calc(var(--c) + .42px),calc(var(--c) + .42px) 1px);
}
.button.ghost,.mini-cta,.carousel-btn{color:#f1f4ef!important}
.button.ghost:hover,.mini-cta:hover,.landing .mini-cta:hover,.carousel-btn:hover:not(:disabled){background:var(--sudo)!important;color:var(--sudo-ink)!important}
.button.ghost:hover::before,.mini-cta:hover::before,.carousel-btn:hover:not(:disabled)::before{opacity:0}
.button.outline{color:var(--sudo-ink)!important}
.button.outline:hover{background:var(--sudo-ink)!important;color:var(--sudo)!important}
.button.dark,.landing .button.dark{background:var(--sudo-ink)!important;color:#f1f4ef!important}
.button.dark:hover,.landing .button.dark:hover{background:#000!important;color:var(--sudo)!important}
.button.dark-btn{color:var(--sudo-ink)!important}
.button.dark-btn:hover{background:var(--sudo-ink)!important;color:var(--sudo)!important}
.button.dark-btn:hover::before{opacity:0}
.mini-cta{--c:9px;padding:12px 16px!important;font:700 11px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.06em!important}
.landing .mini-cta span{position:relative}
.carousel-btn{--c:10px;font-size:20px}
.carousel-btn:disabled{opacity:.3}

/* ---------- Arrow: the S symbol's cut corner ---------- */
.sa{display:inline-block;flex:none;width:.8em;height:.8em;vertical-align:-.05em;background:currentColor;font-style:normal;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4%201.5H11.2L14.5%204.8V12H11.9V6.2L10.2%204.1H4Z%22/%3E%3Cpath%20d%3D%22M10.4%203.8L12.2%205.6L3.4%2014.4L1.6%2012.6Z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4%201.5H11.2L14.5%204.8V12H11.9V6.2L10.2%204.1H4Z%22/%3E%3Cpath%20d%3D%22M10.4%203.8L12.2%205.6L3.4%2014.4L1.6%2012.6Z%22/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .45s var(--ease-sudo)}
.sa-r{transform:rotate(45deg)} .sa-l{transform:rotate(-135deg)} .sa-u{transform:rotate(-45deg)}
.portfolio-next a>span .sa,.portfolio-next a .sa{width:.7em;height:.7em}
.service-links a:hover .svc-arrow .sa,.svc-arrow .sa{transform:none}
.service-links a:hover .svc-arrow{transform:none!important}
.service-links a:hover .svc-arrow .sa{transform:translate(3px,-3px)}
.browse-card:hover .browse-action .sa,.slide:hover .sa{transform:translate(3px,-3px)}

/* ---------- Solid mint instead of gradient text ---------- */
.hero-title em,.landing .hero-title em,.landing h2 em,.landing .services h2 em,.section h2 em,.hero h1 em,
.browse-intro h1 em,.portfolio-intro h1 em,.showcase-title em,.seo-service-content em{
  background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
  -webkit-text-fill-color:currentColor;color:var(--sudo)!important;
}
.landing .about h2 em{color:var(--sudo-deep)!important}
.landing .contact h2 em,.contact h2 em{color:var(--sudo-ink)!important}
.service-links a:hover .svc-name{background:none!important;-webkit-text-fill-color:currentColor;color:var(--sudo)!important}
.svc-num{font:400 18px/1 var(--display)!important;letter-spacing:.02em!important;color:var(--sudo)!important}

/* ---------- Solid fills ---------- */
.scroll-progress span,.carousel-progress span,.intro-bar span{background:var(--sudo)!important}
.landing .nav a:after{height:2px!important;background:var(--sudo)!important}
.topbar .nav a[aria-current]{color:var(--sudo)!important;border-bottom-color:var(--sudo)!important}
.nav a:hover{color:var(--sudo)!important}
.ticker-track span:nth-child(even){color:var(--sudo)!important;-webkit-text-stroke:0!important}
.ticker-track span:after{background:var(--sudo)!important}
.service-links a:before{background:rgba(0,233,161,.07)!important}
.text-link,.portfolio-back,.project-related-all,.browse-action,.seo-service-content p a,.breadcrumbs a,.switch-portfolio a{color:var(--sudo)!important}

/* ---------- Containers with the S cut ---------- */
.service-preview{--c:22px;border:0!important;box-shadow:none!important;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.price-list,.browse-card,.enquiry-form{--c:20px;position:relative;border:0!important;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.price-list::after,.browse-card::after,.enquiry-form::after{content:"";position:absolute;inset:0;pointer-events:none;background:#303b35;transition:background .3s ease;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .42px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - var(--c) - .42px),calc(100% - var(--c) - .42px) calc(100% - 1px),1px calc(100% - 1px),1px calc(var(--c) + .42px),calc(var(--c) + .42px) 1px)}
.browse-card:hover::after{background:var(--sudo)}
.price-list{background:#0f1312!important}
.price-name,.price-value{font:400 clamp(18px,1.8vw,22px)/1.1 var(--display)!important;letter-spacing:.02em!important}
.price-value{color:var(--sudo)!important}
.price-dots{border-bottom-color:rgba(0,233,161,.5)!important}
body.project-detail-page .project-tags span{--c:7px;position:relative;isolation:isolate;border:0!important;
  font:700 11px/1 Arial,Helvetica,sans-serif!important;letter-spacing:.05em!important;color:#c9d1cb!important;padding:9px 12px!important}
body.project-detail-page .project-tags span::before{content:"";position:absolute;inset:0;z-index:-1;background:#3d4640;
  clip-path:polygon(evenodd,var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),var(--c) 0,
    calc(var(--c) + .42px) 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - var(--c) - .42px),calc(100% - var(--c) - .42px) calc(100% - 1px),1px calc(100% - 1px),1px calc(var(--c) + .42px),calc(var(--c) + .42px) 1px)}
.about-inner{--chamfer:clamp(22px,3vw,44px);
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer))!important}

/* ---------- Contact band: solid mint + S pattern (from the pricelist background) ---------- */
.landing .contact,.contact{background-color:var(--sudo)!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22166%22%20viewBox%3D%2280%2080%20530%20492%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%2304110b%22%20stroke-opacity%3D%22.09%22%20stroke-width%3D%227%22%20d%3D%22M127.01633%2C182.83487l57.42246-57.42378h367.5069v91.87672h-292.85731l-28.71057%2C28.71189v126.32967h-45.93902l-57.42246-57.42114v-132.07337ZM563.43044%2C469.94848l-57.42246%2C57.42378H127.01633v-91.87804h304.34074l28.71189-28.71057v-126.32967h45.93902l57.42246%2C57.42378v132.07073Z%22/%3E%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%2304110b%22%20stroke-opacity%3D%22.09%22%20stroke-width%3D%227%22%20cx%3D%22345.22339%22%20cy%3D%22326.39167%22%20r%3D%2245.9377%22/%3E%3C/svg%3E")!important;background-size:180px 166px!important;
  background-repeat:repeat!important;animation:none!important}
.contact-pattern{display:none}
.contact-noise{display:none}

/* ---------- Small caps text: tighter tracking, no monospace ---------- */
.nav a,.mini-cta,footer a,body.project-detail-page .project-page-nav a{letter-spacing:.06em!important}
body.project-detail-page .project-gallery figcaption,body.project-detail-page .project-related-name,.portfolio-item figcaption,
.slide-cap,.motion-item figcaption span:last-child{font-family:Arial,Helvetica,sans-serif!important;letter-spacing:.05em!important}
body.project-detail-page .project-gallery figcaption,body.project-detail-page .project-related-name{font-size:11px!important;font-weight:700}
.slide-cap{color:var(--sudo)!important}
.intro-label,.scroll-cue{display:none!important}
footer .footer-network-label{font-size:13px!important}

/* ---------- Display face everywhere headings appear (Anton stands in where Impact is missing) ---------- */
body.project-detail-page .project-detail-intro h1,body.project-detail-page .project-writeup-content h2,body.project-detail-page .project-cta p,
.browse-intro h1,.portfolio-intro h1,.portfolio-next a,.seo-service-content h2,.contact-page h1,.enquiry-page h1{
  font-family:var(--display)!important;font-weight:400!important;letter-spacing:.005em!important;text-transform:uppercase}
body.project-detail-page .project-detail-intro h1{line-height:.9!important}
body.project-detail-page .project-writeup-content h2{font-size:clamp(30px,3.6vw,48px)!important;line-height:1!important}
.portfolio-intro h1,.browse-intro h1{line-height:.95!important}
.seo-service-content h2{line-height:1.05!important}
/* Labels sit at the top of grid/flex columns rather than centring in them. */
.eyebrow,.project-kicker,.project-writeup-label,.portfolio-number,.footer-network-label,.price-list h3,.project-related h2{align-self:flex-start}
.clients-label{align-self:auto}