@font-face {
    font-family:Inter;
    src:url('/fonts/inter-variable.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap
}
/* Same Inter outlines and variable axes; download extended Unicode only when used. */
@font-face {
    font-family:Inter;
    src:url('/fonts/inter-latin-variable.woff2') format('woff2');
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20A0-20CF,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family:Syne;
    src:url('/fonts/syne-variable.woff2') format('woff2');
    font-weight:400 800;
    font-style:normal;
    font-display:swap
}

@font-face {
    font-family:'Bauhaus 93';
    src:url('/fonts/BAUHS93.TTF') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap
}

:root {
    --ink:#0c0c0c;
    --cream:#fdfde1;
    --lime:#bff747;
    --paper:#fffff5;
    --line:rgba(253,253,225,.2);
    --muted:#b6b6a9;
    --pad:clamp(24px,6vw,100px)
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}

body {
    margin:0;
    background:var(--ink);
    color:var(--cream);
    font-family:Inter,sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased
}

::selection {
    background:var(--lime);
    color:var(--ink)
}

h1,h2,h3,h4 {
    font-family:Syne,sans-serif;
    font-weight:700;
    line-height:1.04;
    letter-spacing:-.045em;
    margin:0
}

h1 {
    font-size:clamp(54px,7.8vw,120px)
}

h2 {
    font-size:clamp(38px,4.5vw,70px)
}

h3 {
    font-size:clamp(24px,2.25vw,34px);
    line-height:1.12
}

p {
    margin:0 0 22px
}

a {
    color:inherit;
    text-decoration:none
}

button,input,select,textarea {
    font:inherit
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

img {
    max-width:100%;
    display:block
}

button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid var(--lime);
    outline-offset:7px
}

.cream :is(button,a,input,select,textarea):focus-visible {
    outline-color:#395b0c
}

h1:focus {
    outline:none
}

em {
    color:var(--lime);
    font-style:normal
}

.lime {
    color:var(--lime)
}

.section {
    padding:100px var(--pad);
    position:relative
}

.cream {
    background:var(--cream);
    color:var(--ink)
}

.cream em {
    color:var(--ink)
}

.eyebrow {
    font-size:11px;
    letter-spacing:.15em;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:11px;
    line-height:1.6;
    text-transform:uppercase;
    margin-bottom:28px
}

.status-dot {
    width:7px;
    height:7px;
    display:inline-block;
    border-radius:50%;
    background:var(--lime);
    box-shadow:0 0 0 5px #bff74712;
    flex-shrink:0
}

.section-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:32px
}

.section-heading .eyebrow {
    margin:0
}

.section-number {
    font:12px Inter,sans-serif;
    opacity:.5
}

.split-heading {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    align-items:end;
    gap:9%;
    margin-bottom:48px
}

.split-heading>p,.split-heading>div>p {
    max-width:460px;
    opacity:.75
}

.split-heading>.button,.split-heading>.text-link {
    justify-self:end
}

.lead {
    max-width:750px;
    font-size:19px;
    line-height:1.7;
    margin-top:28px
}

.marked {
    position:relative;
    z-index:0;
    white-space:normal;
    background:linear-gradient(transparent 66%,var(--lime) 66%,var(--lime) 92%,transparent 92%)
}

.button-row {
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    padding:16px 24px;
    background:var(--lime);
    color:var(--ink);
    border:1px solid var(--lime);
    border-radius:100px;
    font-size:13px;
    font-weight:600;
    line-height:1.5;
    transition:transform .25s,background .25s
}

.button span {
    font-size:21px;
    line-height:1
}

.button:hover {
    transform:translateY(-3px);
    background:var(--cream)
}

.button-outline {
    background:transparent;
    color:var(--cream);
    border-color:#66665a
}

.button-outline:hover {
    background:var(--cream);
    color:var(--ink)
}

.button-dark {
    background:var(--ink);
    color:var(--cream);
    border-color:var(--ink)
}

.button-dark:hover {
    background:var(--lime);
    color:var(--ink)
}

.button-small {
    padding:12px 19px;
    font-size:12px
}

.text-link {
    display:inline-flex;
    gap:24px;
    align-items:center;
    font-size:13px;
    font-weight:600;
    border-bottom:1px solid currentColor;
    padding-bottom:5px
}

.text-link:hover {
    color:#82a82f
}

.skip-link {
    position:fixed;
    top:-80px;
    left:20px;
    background:var(--lime);
    color:var(--ink);
    padding:12px 20px;
    z-index:300
}

.skip-link:focus {
    top:20px
}

.site-header {
    height:104px;
    padding:0 var(--pad);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    border-bottom:1px solid #fdfde112;
    background:#0c0c0cf5;
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(16px)
}

.brand img,.footer-brand img {
    width:148px;
    height:auto;
    object-fit:contain
}

.primary-nav {
    display:flex;
    align-items:center;
    gap:28px;
    font-size:12px;
    font-weight:500
}

.primary-nav>a:not(.button) {
    padding:14px 0
}

.primary-nav>a:hover,.primary-nav>a.active {
    color:var(--lime)
}

.primary-nav>a.active:after {
    content:'';
    display:block;
    height:3px;
    width:3px;
    background:var(--lime);
    border-radius:50%;
    margin:5px auto -8px
}

.services-menu {
    position:relative
}

.services-menu summary {
    list-style:none;
    cursor:pointer;
    padding:20px 0
}

.services-menu summary::-webkit-details-marker {
    display:none
}

.services-menu summary span {
    margin-left:6px
}

.services-menu[open] summary {
    color:var(--lime)
}

.services-dropdown {
    position:absolute;
    top:60px;
    left:-22px;
    width:320px;
    padding:14px;
    background:#171714;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 20px 60px #0006
}

.services-dropdown a {
    display:flex;
    gap:12px;
    justify-content:space-between;
    padding:13px 10px;
    border-radius:8px
}

.services-dropdown a:hover {
    background:#ffffff09;
    color:var(--lime)
}

.menu-toggle {
    display:none
}

.hero {
    min-height:680px;
    height:calc(100svh - 104px);
    max-height:950px;
    padding-top:65px;
    padding-bottom:84px;
    display:flex;
    align-items:center;
    overflow:hidden
}

.hero-copy {
    width:62%;
    position:relative;
    z-index:2
}

.hero h1 {
    font-size:clamp(74px,8.7vw,138px);
    line-height:.98;
    letter-spacing:-.055em
}

.motion-word {
    color:var(--lime)
}

.word-dot {
    color:var(--cream)
}

.hero-description {
    max-width:570px;
    font-size:14px;
    line-height:1.8;
    color:#bcbcaf;
    margin:30px 0 32px
}

.hero .eyebrow {
    margin-bottom:25px
}

.hero-visual {
    width:42vw;
    height:42vw;
    max-height:570px;
    max-width:570px;
    position:absolute;
    right:2vw;
    top:48%;
    transform:translateY(-50%);
    display:grid;
    place-items:center
}

.hero-mark {
    width:49%;
    height:64%;
    object-fit:contain;
    z-index:1;
    animation:logo-drift 7s ease-in-out infinite
}

.orbit {
    border:1px solid #fdfde119;
    border-radius:50%;
    position:absolute;
    inset:4%
}

.orbit-inner {
    inset:13%;
    border-style:dashed;
    animation:orbit-spin 90s linear infinite
}

.orbit-outer:before {
    content:'';
    width:9px;
    height:9px;
    background:var(--lime);
    border-radius:50%;
    position:absolute;
    top:14%;
    left:14%;
    box-shadow:0 0 22px #bff74766
}

.orbit-label {
    font-size:9px;
    letter-spacing:.2em;
    position:absolute;
    color:#85857b
}

.label-top {
    top:0;
    left:18%
}

.label-bottom {
    bottom:0;
    right:13%
}

.visual-cross {
    position:absolute;
    color:#818174;
    font-weight:300
}

.cross-one {
    right:6%;
    top:16%
}

.cross-two {
    bottom:15%;
    left:5%
}

.hero-bottom {
    position:absolute;
    bottom:24px;
    left:var(--pad);
    right:var(--pad);
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:.15em;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:22px
}

.hero-bottom i {
    font-style:normal;
    color:var(--lime);
    margin:0 15px
}

.hero-bottom a span {
    margin-left:18px;
    color:var(--cream)
}

.trust-bar {
    padding:28px var(--pad);
    display:grid;
    grid-template-columns:240px 1fr;
    align-items:center;
    gap:40px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.trust-bar>span {
    font-size:9px;
    letter-spacing:.12em;
    color:var(--muted);
    line-height:2
}

.trust-bar b {
    font-size:11px;
    letter-spacing:0;
    font-weight:400;
    color:var(--cream)
}

.client-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.client-strip img {
    width:90px;
    height:45px;
    object-fit:contain
}

.client-strip img:not(:first-child) {
    filter:grayscale(1) brightness(0) invert(.9)
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-top:48px;
    margin-top:54px;
    border-top:1px solid #0c0c0c30;
    gap:30px
}

.stats-grid>div {
    display:flex;
    flex-direction:column
}

.stats-grid strong {
    font:700 clamp(44px,5vw,76px)/1.1 Syne,sans-serif;
    letter-spacing:-.07em
}

.stats-grid>div>span {
    font-size:12px;
    opacity:.65;
    margin-top:12px
}

.about-hero .stats-grid {
    border-color:var(--line)
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.service-card {
    border:1px solid var(--line);
    padding:26px 30px 30px;
    border-radius:18px;
    position:relative;
    display:flex;
    flex-direction:column;
    transition:background .35s,transform .35s,border-color .35s;
    overflow:hidden
}

.service-card:hover {
    background:#bff74708;
    border-color:var(--lime);
    transform:translateY(-5px)
}

.card-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}

.index {
    font-size:11px;
    letter-spacing:.1em;
    color:var(--muted)
}

.circle-arrow {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    font-size:24px;
    transition:background .3s,color .3s
}

.service-card:hover .circle-arrow {
    background:var(--lime);
    color:var(--ink)
}

.service-card h3 {
    max-width:350px;
    margin:12px 0 17px
}

.service-card p {
    font-size:13px;
    color:#adad9f;
    max-width:470px;
    line-height:1.8
}

.service-card .text-link {
    margin-top:auto;
    align-self:flex-start;
    font-size:11px;
    color:var(--cream);
    border:0;
    padding-top:10px
}

.service-art {
    height:120px;
    position:relative;
    width:150px;
    margin:10px 0 25px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:var(--lime)
}

.service-art i {
    position:absolute;
    width:72px;
    height:72px;
    border:1px solid var(--lime);
    border-radius:50%
}

.art-01 i:nth-child(1) {
    transform:translateX(-28px)
}

.art-01 i:nth-child(2) {
    transform:translateX(-9px)
}

.art-01 i:nth-child(3) {
    transform:translateX(9px)
}

.art-01 i:nth-child(4) {
    transform:translateX(28px)
}

.service-art span {
    display:none
}

.art-02 i {
    width:63px;
    height:63px;
    border-radius:6px;
    transform:rotate(45deg)
}

.art-02 i:nth-child(1) {
    transform:translateX(-32px) rotate(45deg)
}

.art-02 i:nth-child(4) {
    transform:translateX(32px) rotate(45deg)
}

.art-03 i {
    width:62px;
    height:62px
}

.art-03 i:nth-child(1) {
    transform:translate(-20px,-20px)
}

.art-03 i:nth-child(2) {
    transform:translate(20px,-20px)
}

.art-03 i:nth-child(3) {
    transform:translate(-20px,20px)
}

.art-03 i:nth-child(4) {
    transform:translate(20px,20px)
}

.art-04 i {
    border-radius:0;
    width:70px;
    height:70px;
    transform:rotate(12deg)
}

.art-04 i:nth-child(2) {
    transform:rotate(30deg)
}

.art-04 i:nth-child(3) {
    transform:rotate(48deg)
}

.art-04 i:nth-child(4) {
    transform:rotate(66deg)
}

.service-card:hover .service-art {
    animation:art-nudge 2s ease-in-out infinite
}

.moving-strip {
    overflow:hidden;
    background:var(--lime);
    color:var(--ink);
    font:700 clamp(25px,3vw,45px)/1.7 Syne,sans-serif;
    letter-spacing:-.03em;
    padding:15px 0
}

.moving-strip>div {
    width:max-content;
    animation:marquee 36s linear infinite
}

.process-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:50px;
    margin-top:75px;
    position:relative
}

.process-grid:before {
    content:'';
    position:absolute;
    top:36px;
    left:20px;
    right:0;
    height:1px;
    background:#0c0c0c30
}

.process-grid article {
    position:relative
}

.process-number {
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    border:1px solid #0c0c0c40;
    border-radius:50%;
    background:var(--cream);
    font:600 20px Syne,sans-serif;
    margin-bottom:30px;
    position:relative
}

.process-grid .eyebrow {
    font-size:10px;
    margin-bottom:10px
}

.process-grid h3 {
    font-size:29px;
    margin-bottom:20px
}

.process-grid article>p:last-child {
    font-size:13px;
    opacity:.7
}

.work-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px
}

.work-card {
    display:block;
    min-width:0
}

.work-art {
    height:300px;
    border-radius:14px;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#bff747;
    color:var(--ink);
    transition:transform .4s
}

.work-art:after {
    content:'';
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(0deg,transparent,transparent 39px,#0c0c0c0b 39px,#0c0c0c0b 40px);
    z-index:-1
}

.work-art strong {
    font:800 clamp(25px,3vw,46px)/1.05 Syne,sans-serif;
    text-align:center;
    max-width:80%;
    letter-spacing:-.05em;
    position:relative;
    overflow-wrap:anywhere
}

.project-type {
    position:absolute;
    top:20px;
    left:20px;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:8px;
    border:1px solid #0c0c0c50;
    border-radius:100px;
    padding:6px 10px
}

.project-location {
    position:absolute;
    left:20px;
    bottom:22px;
    font-size:9px;
    letter-spacing:.04em
}

.project-open {
    position:absolute;
    right:18px;
    bottom:16px;
    border:1px solid #0c0c0c50;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:19px
}

.orb {
    width:250px;
    height:250px;
    border:1px solid #0c0c0c25;
    position:absolute;
    border-radius:50%;
    z-index:-1;
    transition:transform .7s
}

.orb-one {
    left:-70px;
    top:-40px;
    box-shadow:0 0 0 20px #0c0c0c05,0 0 0 40px #0c0c0c05,0 0 0 60px #0c0c0c05
}

.orb-two {
    right:-80px;
    bottom:-80px;
    width:220px;
    height:220px;
    box-shadow:0 0 0 20px #0c0c0c05,0 0 0 40px #0c0c0c05
}

.work-art-event-management {
    background:var(--cream);
    color:var(--ink)
}

.work-art-workplace-experience {
    background:#2b3923;
    color:var(--cream)
}

.work-art-workplace-experience .orb {
    border-color:#bff74770;
    box-shadow:0 0 0 20px #bff74709,0 0 0 40px #bff74709,0 0 0 60px #bff74709
}

.work-art-workplace-experience .project-type,.work-art-workplace-experience .project-open {
    border-color:#fdfde15a
}

.work-card:hover .orb-one {
    transform:translate(15px,15px)
}

.work-card:hover .orb-two {
    transform:scale(1.2)
}

.work-card:hover .work-art {
    transform:translateY(-4px)
}

.work-caption {
    padding:22px 0 0
}

.work-caption h3 {
    font-size:24px;
    letter-spacing:-.03em;
    line-height:1.2;
    margin-bottom:12px
}

.work-caption p {
    font-size:12px;
    opacity:.65;
    line-height:1.7
}

.project-cta {
    text-align:center
}

.project-cta .eyebrow {
    justify-content:center
}

.project-cta>p:not(.eyebrow) {
    max-width:510px;
    margin:28px auto
}

.project-cta .button-row {
    justify-content:center
}

.project-cta h2 {
    font-size:clamp(44px,6vw,90px)
}

.site-footer {
    padding:70px var(--pad) 0
}

.footer-top {
    padding-bottom:60px;
    border-bottom:1px solid var(--line)
}

.footer-invitation {
    font:700 clamp(40px,5vw,78px)/1.06 Syne,sans-serif;
    letter-spacing:-.045em;
    display:block;
    position:relative
}

.footer-invitation>span {
    position:absolute;
    right:0;
    top:0;
    font-size:100px;
    color:var(--lime)
}

.footer-top .eyebrow {
    font-size:9px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.4fr .7fr 1.1fr 1fr;
    gap:40px;
    padding:60px 0
}

.footer-grid h2 {
    font:500 10px Inter,sans-serif;
    color:#909084;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:23px
}

.footer-grid>div>a:not(.text-link),.footer-brand p {
    display:block;
    font-size:11px;
    line-height:1.7;
    margin-bottom:12px
}

.footer-brand p {
    color:#aaa99a;
    margin-top:20px
}

.footer-brand .text-link {
    font-size:11px
}

.footer-bottom {
    border-top:1px solid var(--line);
    padding:25px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:9px;
    color:#9b9b8e
}

.footer-credit {
    display:flex;
    align-items:center;
    gap:6px;
    direction:ltr;
    unicode-bidi:isolate
}

.footer-credit a {
    font:400 21px/1 'Bauhaus 93',sans-serif;
    color:var(--cream)
}

.whatsapp-float {
    position:fixed;
    bottom:20px;
    right:22px;
    z-index:80;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--lime);
    color:var(--ink);
    border-radius:100px;
    padding:10px 14px;
    box-shadow:0 4px 24px #0003;
    border:1px solid #0c0c0c30;
    font-size:11px;
    font-weight:600
}

.whatsapp-float svg {
    width:24px;
    height:24px
}

.page-hero {
    padding-top:80px
}

.page-hero h1 {
    max-width:1100px
}

.page-hero .lead {
    margin-bottom:36px
}

.page-hero>.service-grid {
    margin-top:60px
}

.breadcrumb {
    font-size:11px;
    color:var(--muted);
    display:inline-block;
    margin-bottom:40px
}

.service-hero {
    display:grid;
    grid-template-columns:1fr 210px;
    gap:40px;
    align-items:center
}

.service-hero h1 {
    font-size:clamp(50px,6.7vw,96px)
}

.service-hero>.service-art {
    transform:scale(1.5);
    width:150px
}

.service-hero .lead {
    font-size:16px
}

.offering-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 60px;
    margin-top:50px
}

.offering {
    border-top:1px solid #0c0c0c30;
    padding:30px 36px 30px 0;
    position:relative
}

.offering>span {
    position:absolute;
    right:0;
    top:28px;
    font-size:25px
}

.offering h3 {
    font-size:28px;
    margin-bottom:18px
}

.offering p {
    font-size:14px;
    opacity:.7;
    max-width:440px
}

.portfolio-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px 24px
}

.portfolio-grid .work-art-event-management {
    background:#dbdfc3
}

.filters {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    border-top:1px solid #0c0c0c25;
    padding-top:32px;
    margin-top:54px
}

.filter {
    border:1px solid #0c0c0c35;
    border-radius:100px;
    padding:9px 15px;
    font-size:11px;
    background:transparent;
    color:var(--ink);
    transition:background .2s
}

.filter.active,.filter:hover {
    background:var(--ink);
    color:var(--lime);
    border-color:var(--ink)
}

.result-count {
    font-size:10px;
    margin:24px 0
}

.result-count span {
    opacity:.5
}

.empty-state {
    padding:80px 0
}

.empty-state p {
    margin:25px 0
}

.project-detail-art {
    height:480px;
    margin-top:65px
}

.project-detail-art strong {
    font-size:clamp(50px,8vw,120px)
}

.project-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    margin:45px 0;
    padding:30px 0;
    gap:30px
}

.project-meta span {
    font-size:9px;
    opacity:.5;
    letter-spacing:.1em
}

.project-meta h3 {
    font-size:24px;
    margin-top:14px
}

.values-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%
}

.values-grid h2 {
    font-size:clamp(32px,3.5vw,55px)
}

.values-grid article>p:last-child {
    margin-top:30px;
    opacity:.7;
    font-size:14px;
    max-width:430px
}

.about-hero>.split-heading {
    margin-top:40px;
    align-items:start
}

.about-hero .split-heading .lead {
    margin:0
}

.timeline {
    margin-top:65px
}

.timeline article {
    display:grid;
    grid-template-columns:1fr 2fr;
    border-top:1px solid var(--line);
    padding:40px 0;
    gap:60px
}

.timeline strong {
    font:700 66px/1 Syne,sans-serif;
    color:var(--lime);
    letter-spacing:-.05em
}

.timeline h3 {
    margin-bottom:18px
}

.timeline .eyebrow {
    margin-bottom:12px;
    color:var(--muted);
    font-size:9px
}

.timeline article p {
    font-size:14px;
    color:var(--muted);
    max-width:590px
}

.team-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:45px 28px;
    margin:55px 0
}

.team-avatar {
    height:210px;
    background:#e5e8cc;
    border-radius:12px;
    margin-bottom:22px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden
}

.team-avatar:before,.team-avatar:after {
    content:'';
    position:absolute;
    border:1px solid #0c0c0c12;
    width:220px;
    height:220px;
    border-radius:50%;
    left:-70px;
    top:-80px
}

.team-avatar:after {
    left:auto;
    right:-70px;
    top:auto;
    bottom:-80px
}

.team-avatar span {
    font:700 75px/1 Syne,sans-serif;
    letter-spacing:-.07em
}

.team-avatar i {
    position:absolute;
    right:18px;
    bottom:18px;
    font:24px Inter,sans-serif
}

.team-member:nth-child(2n) .team-avatar {
    background:var(--ink);
    color:var(--lime)
}

.team-member:nth-child(3n) .team-avatar {
    background:var(--lime)
}

.team-member .eyebrow {
    font-size:9px;
    margin-bottom:8px;
    opacity:.55
}

.team-member h3 {
    font-size:25px;
    margin-bottom:9px
}

.team-member p {
    font-size:12px;
    opacity:.65
}

.office-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:60px;
    border-top:1px solid #0c0c0c30
}

.office-grid article {
    padding:35px 28px 35px 0
}

.office-grid article+article {
    border-left:1px solid #0c0c0c30;
    padding-left:28px
}

.office-index {
    font-size:9px;
    letter-spacing:.1em
}

.office-grid h2 {
    font-size:44px;
    margin:25px 0
}

.office-grid h2 span {
    float:right;
    font-size:30px
}

.office-grid p {
    font-size:13px;
    opacity:.6;
    min-height:48px
}

.office-grid article>a {
    display:block;
    font-size:12px;
    margin:8px 0;
    overflow-wrap:anywhere
}

.office-grid article>.text-link {
    display:inline-flex;
    margin-top:25px
}

.contact-prompt {
    border-top:1px solid #0c0c0c30;
    margin-top:35px;
    padding-top:65px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%;
    align-items:end
}

.contact-prompt>div>p:not(.eyebrow) {
    font-size:14px;
    max-width:450px;
    opacity:.7
}

.brief-layout {
    display:grid;
    grid-template-columns:1fr 310px;
    gap:8%;
    align-items:start
}

.brief-panel {
    max-width:800px
}

.brief-progress {
    display:flex;
    gap:12px;
    align-items:center;
    list-style:none;
    padding:0;
    margin:0 0 40px
}

.brief-progress li {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:11px;
    color:#77786b
}

.brief-progress li span {
    width:30px;
    height:30px;
    border:1px solid #0c0c0c30;
    border-radius:50%;
    display:grid;
    place-items:center
}

.brief-progress li.current {
    color:var(--ink);
    font-weight:600
}

.brief-progress li.current span {
    background:var(--ink);
    color:var(--lime)
}

.form-title {
    font-size:32px;
    margin-bottom:8px
}

.form-intro {
    font-size:13px;
    opacity:.6
}

.field-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
    margin-top:30px
}

.field {
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:11px;
    font-weight:600
}

.field-wide {
    grid-column:1/-1
}

input,select,textarea {
    width:100%;
    border:1px solid #0c0c0c35;
    background:transparent;
    border-radius:9px;
    color:var(--ink);
    padding:13px 14px;
    font-size:13px;
    min-height:48px
}

input:focus,select:focus,textarea:focus {
    outline:2px solid #507e18;
    outline-offset:2px
}

textarea {
    resize:vertical;
    min-height:160px
}

select {
    appearance:auto
}

input::placeholder,textarea::placeholder {
    color:#77786b;
    font-weight:400
}

.form-actions {
    display:flex;
    gap:20px;
    margin-top:32px
}

.brief-aside {
    border-top:1px solid #0c0c0c30;
    padding-top:25px
}

.brief-aside h3 {
    font-size:27px;
    margin-bottom:20px
}

.brief-aside p {
    font-size:13px;
    opacity:.65
}

.brief-aside a {
    font-size:11px
}

.brief-aside .aside-mark {
    width:70px;
    height:80px;
    object-fit:contain;
    margin-bottom:30px;
    filter:brightness(.2)
}

.review-list {
    margin:30px 0
}

.review-list>div {
    padding:15px 0;
    border-bottom:1px solid #0c0c0c20
}

.review-list dt {
    font-size:10px;
    opacity:.6
}

.review-list dd {
    margin:5px 0 0;
    font-size:14px;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}

.handoff-note {
    font-size:11px;
    opacity:.65;
    margin-top:24px
}

.reveal {
    opacity:1;
    transform:none
}

.js-motion .reveal[data-observed] {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .65s,transform .65s
}

.js-motion .reveal.in-view[data-observed] {
    opacity:1;
    transform:none
}

#blazor-error-ui {
    display:none;
    background:var(--cream);
    color:var(--ink);
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    z-index:200;
    padding:15px var(--pad);
    font-size:13px
}

#blazor-error-ui a {
    text-decoration:underline
}

@keyframes logo-drift {
    0%,100% {
        transform:translateY(0) rotate(-5deg)
    }
    50% {
        transform:translateY(-12px) rotate(3deg)
    }
}

@keyframes orbit-spin {
    to {
        transform:rotate(360deg)
    }
}

@keyframes marquee {
    to {
        transform:translateX(-50%)
    }
}

@keyframes art-nudge {
    50% {
        transform:rotate(6deg)
    }
}

@media(min-width:1600px) {
    .section,.site-footer,.site-header,.trust-bar {
        padding-left:max(var(--pad),calc((100vw - 1400px)/2));
        padding-right:max(var(--pad),calc((100vw - 1400px)/2))
    }
}

@media(max-width:1100px) {
    .primary-nav {
        gap:18px
    }
    .nav-cta {
        gap:14px;
        padding:10px 14px;
        font-size:10px
    }
    .site-header {
        gap:20px
    }
    .hero-description {
        font-size:13px;
        max-width:480px
    }
    .trust-bar {
        grid-template-columns:190px 1fr;
        gap:25px
    }
    .client-strip {
        gap:18px
    }
    .client-strip img {
        width:65px
    }
    .footer-grid {
        gap:24px
    }
    .service-card {
        padding:22px
    }
    .work-art {
        height:250px
    }
    .brief-layout {
        grid-template-columns:1fr 250px;
        gap:5%
    }
}

@media(max-width:850px) {
    .site-header {
        height:80px
    }
    .brand img {
        width:130px
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        gap:6px;
        border:1px solid var(--line);
        border-radius:50%;
        background:transparent;
        width:42px;
        height:42px;
        align-items:center;
        justify-content:center
    }
    .menu-toggle span {
        display:block;
        width:17px;
        height:1px;
        background:var(--cream)
    }
    .primary-nav {
        display:none;
        position:absolute;
        top:79px;
        left:0;
        right:0;
        background:var(--ink);
        padding:20px var(--pad) 30px;
        border-bottom:1px solid var(--line);
        max-height:calc(100svh - 80px);
        overflow-y:auto;
        align-items:stretch;
        gap:4px;
        font-size:15px
    }
    .primary-nav.is-open {
        display:flex;
        flex-direction:column
    }
    .primary-nav>a.active:after {
        display:none
    }
    .primary-nav .button {
        align-self:start;
        margin-top:15px;
        font-size:12px
    }
    .services-menu summary {
        padding:14px 0
    }
    .services-dropdown {
        position:static;
        width:auto;
        border:0;
        box-shadow:none;
        background:#ffffff06;
        padding:5px 12px
    }
    .services-dropdown a {
        font-size:12px
    }
    .hero {
        height:auto;
        min-height:690px;
        padding-top:65px;
        padding-bottom:100px
    }
    .hero h1 {
        font-size:clamp(65px,10vw,90px)
    }
    .hero-copy {
        width:70%
    }
    .hero-visual {
        right:-9%;
        width:45vw;
        height:45vw;
        top:40%
    }
    .hero-mark {
        width:48%
    }
    .orbit-label {
        font-size:6px
    }
    .hero-description {
        max-width:440px
    }
    .hero .eyebrow {
        font-size:9px
    }
    .section {
        padding-top:75px;
        padding-bottom:75px
    }
    .split-heading {
        gap:6%;
        grid-template-columns:1.1fr 1fr
    }
    .split-heading>p,.split-heading>div>p {
        font-size:13px
    }
    .trust-bar {
        grid-template-columns:1fr;
        gap:22px
    }
    .client-strip {
        justify-content:space-between;
        gap:20px
    }
    .client-strip img {
        width:75px;
        height:40px
    }
    .trust-bar>span br {
        display:none
    }
    .trust-bar b {
        margin-left:15px
    }
    .service-card p {
        font-size:12px
    }
    .process-grid {
        gap:25px
    }
    .process-grid h3 {
        font-size:24px
    }
    .work-grid,.portfolio-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:28px 20px
    }
    .work-grid>.work-card:last-child:nth-child(3) {
        grid-column:1/-1
    }
    .work-grid>.work-card:last-child:nth-child(3) .work-art {
        height:260px
    }
    .work-art strong {
        font-size:37px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:35px
    }
    .service-hero {
        grid-template-columns:1fr 120px;
        gap:15px
    }
    .service-hero>.service-art {
        transform:scale(.9)
    }
    .service-hero h1 {
        font-size:52px
    }
    .team-grid {
        gap:35px 18px
    }
    .team-avatar {
        height:160px
    }
    .team-member h3 {
        font-size:22px
    }
    .office-grid h2 {
        font-size:34px
    }
    .office-grid article {
        padding-right:16px
    }
    .office-grid article+article {
        padding-left:16px
    }
    .brief-layout {
        grid-template-columns:1fr
    }
    .brief-aside {
        margin-top:60px;
        max-width:600px
    }
    .brief-aside .aside-mark {
        display:none
    }
}

@media(max-width:560px) {
    body {
        font-size:15px
    }
    .section {
        padding-top:60px;
        padding-bottom:60px
    }
    h1 {
        font-size:51px
    }
    h2 {
        font-size:39px
    }
    .hero {
        min-height:810px;
        display:block;
        padding-top:43px;
        padding-bottom:310px
    }
    .hero-copy {
        width:100%
    }
    .hero h1 {
        font-size:66px
    }
    .hero-description {
        font-size:12px;
        max-width:100%;
        margin-top:24px
    }
    .hero .eyebrow {
        font-size:8px;
        letter-spacing:.12em;
        gap:9px
    }
    .hero-visual {
        width:235px;
        height:235px;
        right:calc(50% - 117.5px);
        top:auto;
        bottom:74px;
        transform:none
    }
    .hero-mark {
        height:60%;
        width:45%
    }
    .orbit-label {
        font-size:6px
    }
    .hero-bottom {
        font-size:7px;
        letter-spacing:.08em;
        bottom:20px;
        padding-top:17px
    }
    .hero-bottom i {
        margin:0 6px
    }
    .hero-bottom a span {
        margin-left:5px
    }
    .button {
        padding:13px 18px;
        font-size:11px;
        gap:22px
    }
    .button-row {
        gap:12px
    }
    .trust-bar {
        padding-top:24px;
        padding-bottom:24px
    }
    .trust-bar>span {
        font-size:8px
    }
    .trust-bar b {
        font-size:9px;
        margin-left:8px
    }
    .client-strip {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        justify-items:center;
        gap:22px
    }
    .client-strip img {
        width:80px;
        height:36px
    }
    .split-heading {
        display:block;
        margin-bottom:34px
    }
    .split-heading>p,.split-heading>div {
        margin-top:26px
    }
    .split-heading>.button,.split-heading>.text-link {
        margin-top:28px
    }
    .eyebrow {
        font-size:8px;
        letter-spacing:.12em
    }
    .section-heading {
        margin-bottom:25px
    }
    .section-number {
        font-size:10px
    }
    .stats-grid {
        grid-template-columns:1fr 1fr;
        gap:30px 20px;
        margin-top:34px;
        padding-top:30px
    }
    .stats-grid strong {
        font-size:52px
    }
    .stats-grid>div>span {
        font-size:10px
    }
    .service-grid {
        grid-template-columns:1fr;
        gap:15px
    }
    .service-card {
        padding:24px
    }
    .service-card h3 {
        font-size:30px
    }
    .service-card p {
        font-size:12px
    }
    .service-art {
        height:96px;
        margin-bottom:15px
    }
    .service-card .text-link {
        padding-top:10px
    }
    .moving-strip {
        font-size:25px;
        padding:10px 0
    }
    .process-grid {
        grid-template-columns:1fr;
        gap:30px;
        margin-top:40px
    }
    .process-grid:before {
        display:none
    }
    .process-grid article {
        padding-left:68px;
        padding-top:4px
    }
    .process-number {
        position:absolute;
        top:0;
        left:0;
        width:44px;
        height:44px;
        font-size:15px;
        margin:0
    }
    .process-grid h3 {
        font-size:27px
    }
    .process-grid article>p:last-child {
        font-size:12px
    }
    .work-grid,.portfolio-grid {
        grid-template-columns:1fr;
        gap:30px
    }
    .work-grid>.work-card:last-child:nth-child(3) {
        grid-column:auto
    }
    .work-art,.work-grid>.work-card:last-child:nth-child(3) .work-art {
        height:290px
    }
    .work-art strong {
        font-size:45px
    }
    .work-caption {
        padding-top:18px
    }
    .work-caption h3 {
        font-size:25px
    }
    .work-caption p {
        font-size:12px
    }
    .project-cta h2 {
        font-size:45px
    }
    .project-cta>p:not(.eyebrow) {
        font-size:13px
    }
    .site-footer {
        padding-top:50px
    }
    .footer-top {
        padding-bottom:40px
    }
    .footer-top .eyebrow {
        font-size:7px;
        letter-spacing:.07em
    }
    .footer-invitation {
        font-size:40px;
        padding-right:25px
    }
    .footer-invitation>span {
        font-size:42px;
        right:-4px;
        top:5px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        padding:40px 0;
        gap:35px 15px
    }
    .footer-brand {
        grid-column:1/-1
    }
    .footer-grid>div:last-child {
        grid-column:1/-1
    }
    .footer-grid>div:last-child>a {
        display:inline-block;
        margin-right:20px
    }
    .footer-bottom {
        font-size:8px;
        flex-wrap:wrap;
        gap:18px;
        padding-bottom:80px
    }
    .footer-bottom>a {
        margin-left:auto
    }
    .footer-credit a {
        font-size:19px
    }
    .whatsapp-float {
        right:16px;
        bottom:16px;
        padding:9px 11px
    }
    .whatsapp-float span {
        display:none
    }
    .page-hero {
        padding-top:48px
    }
    .page-hero .lead {
        font-size:15px
    }
    .page-hero>.service-grid {
        margin-top:40px
    }
    .service-hero {
        display:block
    }
    .service-hero h1 {
        font-size:47px
    }
    .service-hero>.service-art {
        display:none
    }
    .service-hero .eyebrow {
        font-size:8px
    }
    .breadcrumb {
        margin-bottom:30px
    }
    .offering-grid {
        grid-template-columns:1fr;
        margin-top:35px
    }
    .offering h3 {
        font-size:27px
    }
    .offering p {
        font-size:13px
    }
    .filters {
        gap:7px;
        margin-top:34px;
        padding-top:25px
    }
    .filter {
        font-size:10px;
        padding:8px 12px
    }
    .project-detail-art {
        height:300px;
        margin-top:40px
    }
    .project-detail-art strong {
        font-size:48px
    }
    .project-meta {
        grid-template-columns:1fr;
        gap:25px
    }
    .project-meta h3 {
        font-size:25px
    }
    .values-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .values-grid h2 {
        font-size:39px
    }
    .timeline {
        margin-top:40px
    }
    .timeline article {
        grid-template-columns:1fr;
        gap:20px;
        padding:30px 0
    }
    .timeline strong {
        font-size:52px
    }
    .timeline h3 {
        font-size:27px
    }
    .timeline article p {
        font-size:13px
    }
    .team-grid {
        grid-template-columns:1fr 1fr;
        gap:28px 14px;
        margin:35px 0
    }
    .team-avatar {
        height:155px;
        margin-bottom:18px
    }
    .team-avatar span {
        font-size:56px
    }
    .team-member h3 {
        font-size:20px;
        line-height:1.15
    }
    .team-member p {
        font-size:10px
    }
    .team-member .eyebrow {
        font-size:7px
    }
    .office-grid {
        grid-template-columns:1fr;
        margin-top:40px
    }
    .office-grid article,.office-grid article+article {
        border-left:0;
        padding:30px 0;
        border-bottom:1px solid #0c0c0c30
    }
    .office-grid h2 {
        font-size:43px;
        margin:20px 0
    }
    .office-grid p {
        min-height:0
    }
    .office-grid article>.text-link {
        margin-top:18px
    }
    .contact-prompt {
        grid-template-columns:1fr;
        gap:28px;
        border-top:0;
        padding-top:20px
    }
    .contact-prompt p {
        font-size:13px
    }
    .brief-progress {
        gap:10px;
        justify-content:space-between
    }
    .brief-progress li {
        font-size:9px;
        gap:5px
    }
    .brief-progress li span {
        width:25px;
        height:25px
    }
    .field-grid {
        grid-template-columns:1fr;
        gap:20px
    }
    .field-wide {
        grid-column:auto
    }
    .form-title {
        font-size:30px
    }
    .form-actions {
        gap:12px
    }
    .form-actions .button {
        gap:18px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
    .js-motion .reveal[data-observed] {
        opacity:1;
        transform:none
    }
}

.sector-list {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:40px
}

.sector-list span {
    border:1px solid #0c0c0c35;
    border-radius:100px;
    padding:12px 20px;
    font-size:13px
}

.optional {
    font-weight:400;
    opacity:.6;
    display:inline
}

@media(max-width:560px) {
    .hero h1 {
        font-size:clamp(44px,14.8vw,66px)
    }
    input,select,textarea {
        font-size:16px
    }
    .field {
        font-size:12px
    }
}

.form-error {
    border-left:3px solid #ab341c;
    background:#ab341c0a;
    color:#8a2613;
    padding:12px 16px;
    font-size:13px;
    margin-bottom:25px
}