@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("./dm-sans-latin.woff2") format("woff2"); }
:root{--ink: #111110; --paper: #f5f3ed; --red: #ef382e; --muted: #aaa9a4; --gutter: 6%; --ease: cubic-bezier(.2,.7,.2,1);}
*{box-sizing: border-box;}
html{scroll-behavior: smooth; scroll-padding-top: 30px;}
body{margin: 0px; background: var(--ink); color: var(--paper); font-family: "DM Sans", Arial, sans-serif; -webkit-font-smoothing: antialiased;}
h1, h2, h3, p{margin: 0px;}
a{color: inherit; text-decoration: none;}
button, input, textarea{font: inherit;}
button{cursor: pointer;}
a, button{-webkit-tap-highlight-color: transparent;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline: 2px solid var(--red); outline-offset: 6px;}
::selection{background: var(--red); color: var(--paper);}
.wrap{padding-left: var(--gutter); padding-right: var(--gutter);}
.red{color: var(--red);}
.dim{color: rgb(119, 118, 111);}
.chapter, .footer-bottom, .scroll-link{font: 10px / 1.6 "DM Sans", Arial, sans-serif; letter-spacing: 0px;}
.skip{position: fixed; top: -100px; left: 20px; padding: 16px; background: var(--paper); color: var(--ink); z-index: 10;}
.skip:focus{top: 15px;}
header{height: 100px; margin: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
.wordmark{display: inline-flex; align-items: center; gap: 7px; font-size: 37px; font-weight: 650; letter-spacing: -2px; min-height: 45px;}
.wordmark span{font-size: 30px;}
nav{display: flex; gap: 40px; font-size: 12px;}
nav a{display: flex; align-items: center; min-height: 45px; gap: 22px;}
nav a:hover{color: var(--red);}
.contact-link span{font-size: 23px;}
.hero{position: relative; min-height: min(850px, -100px + 100vh);min-height: min(850px, -100px + 100svh); padding-top: 32px; padding-bottom: 68px; overflow: hidden;}
h1{font-size: clamp(68px, 9.4vw, 156px); line-height: 0.98; letter-spacing: -0.075em; font-weight: 500; margin-top: 70px; position: relative; z-index: 1;}
.together{position: relative; display: inline-block;}
.hero-bottom{display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 90px;}
.hero-bottom > p{font-size: 18px; line-height: 1.6; width: 31%;}
.scroll-link{display: flex; align-items: center; gap: 18px; min-height: 48px;}
.chapter{display: flex; align-items: center; gap: 24px;}
.chapter > span{color: var(--muted);}
h2{font-size: clamp(48px, 6.8vw, 106px); line-height: 1.03; letter-spacing: -0.06em; font-weight: 500;}
.lead{font-size: clamp(19px, 2vw, 29px); line-height: 1.6; letter-spacing: -0.025em;}
.small-copy{font-size: 15px; line-height: 1.8; max-width: 365px; color: var(--muted);}
.opening{padding-top: 85px; padding-bottom: 130px; position: relative; overflow: hidden;}
.opening-copy{margin: 80px 0px 0px 21%; position: relative; z-index: 1;}
.opening-copy > .lead{margin-top: 45px;}
.opening-copy > .small-copy{margin-top: 30px;}
.light{background: var(--paper); color: var(--ink);}
.light .chapter > span{color: rgb(105, 104, 97);}
.reality{padding-top: 65px; padding-bottom: 55px; overflow: hidden;}
.reality h2{margin-top: 75px;}
.reality-bottom{display: flex; justify-content: space-between; align-items: flex-end; gap: 35px; margin-top: 50px;}
.reality-bottom .small-copy{color: rgb(104, 103, 95);}
.approach{padding-top: 80px; padding-bottom: 70px;}
.approach > h2{margin-top: 70px;}
.statement{background: var(--red); color: var(--ink); position: relative; padding-top: 80px; padding-bottom: 85px; overflow: hidden;}
.statement h2{margin: 65px 0px; font-size: clamp(49px, 7.7vw, 120px); position: relative; z-index: 1;}
.statement h2 > span{color: var(--paper);}
.text-link{display: inline-flex; align-items: center; gap: 30px; min-height: 48px; font: 10px "DM Sans", Arial, sans-serif; position: relative; z-index: 1;}
.text-link span{font: 27px Arial;}
.text-link:hover{color: var(--paper);}
.statement-star{position: absolute; right: -60px; bottom: -110px; font-size: 500px; line-height: 1; opacity: 0.12;}
.services{padding-top: 75px; padding-bottom: 100px;}
.services-heading{margin: 70px 0px 65px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;}
.services-heading h2{font-size: clamp(45px, 5.7vw, 85px);}
.services-heading > p{font-size: 14px; line-height: 1.7; flex-shrink: 0;}
.contact{padding-top: 75px; padding-bottom: 100px;}
.contact h2{margin: 25px 0px 35px;}
.contact .lead{font-size: 20px;}
form{padding-top: 8px;}
label{display: block; font-size: 12px; margin: 0px 0px 12px;}
input, textarea{width: 100%; display: block; background: transparent; color: var(--paper); border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(255, 255, 255, 0.333); border-image: none; border-radius: 0px; padding: 12px 0px 18px; font-size: 16px; margin-bottom: 32px;}
textarea{resize: vertical; min-height: 110px;}
form button{display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 15px 22px; background: var(--red); color: var(--ink); border: 0px; font-weight: 600; transition: background 0.25s;}
form button:hover{background: var(--paper);}
form button span{font-size: 25px;}
#brief-status{margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.7;}
footer{border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 35px; padding-bottom: 25px; overflow: hidden;}
.footer-logo{font-size: clamp(90px, 20vw, 330px); letter-spacing: -0.075em; line-height: 1.2; gap: 2vw;}
.footer-logo span{font-size: 0.72em; color: var(--red);}
.footer-bottom{display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--muted); margin-top: 30px; font-size: 9px;}
.footer-bottom a{min-height: 45px; display: flex; align-items: center;}
.footer-bottom a:hover{color: var(--paper);}
@supports (animation-timeline:view()) {.statement-star{animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: star-shift; animation-timeline: view(); animation-range: entry exit;}
@keyframes star-shift { 
  0% { transform: rotate(-20deg); }
  100% { transform: rotate(40deg); }
}}
@media (min-width: 1700px) {:root{--gutter: max(6%,calc((100vw - 1550px)/2));}}
@media (max-width: 900px) {nav{gap: 23px;}
.hero{min-height: 0px; padding-bottom: 65px;}
h1{margin-top: 65px; font-size: 10vw;}
.hero-bottom > p{width: 40%; font-size: 16px;}
.opening-copy{margin-left: 10%;}
.reality-bottom{align-items: start;}
.services-heading{display: block;}
.services-heading > p{margin-top: 25px;}
.contact h2{font-size: 6vw;}
.contact .lead{font-size: 17px;}}
@media (max-width: 600px) {:root{--gutter: 6%;}
header{height: 80px;}
.wordmark{font-size: 30px;}
.wordmark span{font-size: 25px;}
nav a:not(:last-child){display: none;}
nav{font-size: 11px;}
.hero{padding-top: 24px; padding-bottom: 45px;}
h1{font-size: 12vw; letter-spacing: -0.065em; margin-top: 60px; line-height: 1.05;}
.hero-bottom{margin-top: 65px; flex-direction: column-reverse; align-items: start; gap: 35px;}
.hero-bottom > p{width: 100%; font-size: 16px;}
.scroll-link{font-size: 8px;}
.chapter{font-size: 9px; gap: 20px;}
h2{font-size: 12vw;}
.opening{padding-top: 55px; padding-bottom: 80px;}
.opening-copy{margin: 60px 0px 0px;}
.opening-copy > .lead{font-size: 17px; margin-top: 35px;}
.opening-copy > .small-copy{font-size: 14px; max-width: 83%;}
.reality{padding-top: 50px; padding-bottom: 20px;}
.reality h2{margin-top: 55px; font-size: 11.4vw;}
.reality-bottom{display: block; margin-top: 35px;}
.reality-bottom .lead{font-size: 17px;}
.reality-bottom .small-copy{font-size: 13px; margin-top: 25px;}
.approach{padding-top: 55px; padding-bottom: 30px;}
.approach > h2{margin-top: 55px;}
.statement{padding-top: 55px; padding-bottom: 55px;}
.statement h2{font-size: 11.9vw; margin: 45px 0px;}
.text-link{font-size: 8px; gap: 15px;}
.statement-star{font-size: 300px; bottom: -75px; right: -90px;}
.services{padding-top: 55px; padding-bottom: 60px;}
.services-heading{margin: 50px 0px 35px;}
.services-heading h2{font-size: 10.5vw;}
.services-heading > p{font-size: 13px;}
.contact{padding-top: 55px; padding-bottom: 65px;}
.contact h2{font-size: 13vw;}
.contact .lead{font-size: 18px;}
.footer-logo{font-size: 19.7vw; gap: 2vw;}
.footer-bottom{flex-wrap: wrap; font-size: 7px; gap: 10px; margin-top: 20px;}
.footer-bottom > span:first-child{width: 100%;}
footer{padding-top: 25px;}}
@media (prefers-reduced-motion: reduce) {html{scroll-behavior: auto;}
*, ::before, ::after{animation: auto ease 0s 1 normal none running none !important; transition: none !important;}}
.hero, .opening, .approach, .contact, .statement{isolation: isolate; position: relative; overflow: clip;}
.opening::before, .approach::before, .contact::before, .statement::before{content: ""; position: absolute; inset: -80px -100px; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0px, transparent 119px, rgba(239, 56, 46, 0.07) 119px, rgba(239, 56, 46, 0.07) 120px), repeating-linear-gradient(0deg, transparent 0px, transparent 119px, rgba(255, 255, 255, 0.03) 119px, rgba(255, 255, 255, 0.03) 120px); transform: translate3d(0px, 0px, 0px); animation: 22s linear 0s infinite normal none paused circuit-drift; mask-image: linear-gradient(110deg, transparent 15%, rgb(0, 0, 0) 90%);}
.in-view::before{animation-play-state: running;}
.statement::before{background: repeating-linear-gradient(90deg, transparent 0px, transparent 119px, rgba(17, 17, 17, 0.133) 119px, rgba(17, 17, 17, 0.133) 120px), repeating-linear-gradient(0deg, transparent 0px, transparent 119px, rgba(17, 17, 17, 0.133) 119px, rgba(17, 17, 17, 0.133) 120px);}
@keyframes circuit-drift { 
  100% { transform: translate3d(120px, -120px, 0px); }
}
.hero h1{margin-top: 75px;}
.chapter, .footer-bottom, .scroll-link{font-family: "DM Sans", Arial, sans-serif; font-size: 12px; letter-spacing: 0px;}
.chapter{font-size: 13px;}
.chapter > span{color: var(--muted);}
.scroll-link{font-size: 12px; line-height: 1.5;}
.text-link{font-family: inherit; font-size: 13px;}
.footer-bottom{font-size: 11px;}
nav{margin-left: auto;}
header{gap: 20px;}
.footer-logo{display: flex; width: max-content; max-width: 100%; margin-inline: auto; justify-content: center; font-size: clamp(90px, 18vw, 300px); padding-right: 0.055em;}
.approach > h2{font-size: clamp(48px, 6.4vw, 99px);}
@media (max-width: 600px) {header{gap: 10px; flex-wrap: wrap; height: auto; min-height: 80px; padding: 12px 0px;}
nav{margin-left: auto;}
.wordmark{font-size: 28px;}
.wordmark span{font-size: 23px;}
nav a{gap: 10px;}
.hero h1{margin-top: 40px;}
.chapter, .scroll-link{font-size: 11px;}
.footer-bottom{font-size: 10px;}
.footer-logo{font-size: 18vw;}
.approach > h2{font-size: 11vw;}
.text-link{font-size: 11px;}}
@media (max-width: 600px) {.hero h1{font-size: 11.6vw;}
}
header{height: 96px; position: relative; z-index: 10; gap: 30px;}
header nav{margin-left: auto; gap: 35px;}
.header-actions{display: flex; align-items: center; gap: 24px;}
.header-actions > .contact-link{background: var(--paper); color: var(--ink); border: 0px; border-radius: 28px; padding: 12px 22px; min-height: 46px; display: flex; gap: 25px; align-items: center; font-size: 13px; transition: background 0.25s, transform 0.25s;}
.header-actions > .contact-link:hover{background: var(--red); transform: translateY(-2px);}
.language-picker{position: relative;}
#language-toggle{display: flex; align-items: center; gap: 10px; color: var(--paper); background: transparent; border: 0px; min-height: 46px; padding: 10px; font-size: 12px; cursor: pointer;}
#language-toggle svg{transition: transform 0.25s;}
#language-toggle[aria-expanded="true"] svg{transform: rotate(180deg);}
#language-options{position: absolute; top: calc(100% + 12px); right: 0px; background: var(--paper); color: var(--ink); padding: 7px; width: 190px; box-shadow: rgba(0, 0, 0, 0.333) 0px 15px 45px; border-radius: 12px; animation: language-in .2s var(--ease);}
#language-options button{background: none; border: 0px; border-radius: 7px; display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 12px; font-size: 12px; color: var(--ink);}
#language-options button:hover{background: rgba(17, 17, 17, 0.067);}
#language-options button[aria-pressed="true"]{background: rgba(239, 56, 46, 0.106);}
#language-options button > span:last-child{color: rgb(102, 102, 102);}
.contact-cta{border: 0px; background: var(--paper); color: var(--ink); min-height: 58px; padding: 16px 24px; font-size: 15px; display: flex; align-items: center; gap: 65px; transition: background 0.25s;}
.contact-cta:hover{background: var(--red);}
#contact-dialog{padding: 0px; width: min(1080px, 100% - 40px); max-height: calc(-40px + 100vh);max-height: calc(-40px + 100svh); border: 1px solid rgba(255, 255, 255, 0.145); border-radius:clamp(24px,3vw,36px); background: var(--ink); color: var(--paper); overflow: auto; box-shadow: rgba(0, 0, 0, 0.6) 0px 35px 120px;}
#contact-dialog::backdrop{background: rgba(0, 0, 0, 0.733); backdrop-filter: blur(8px);}
#contact-dialog[open]{animation: dialog-in .3s var(--ease);}
.dialog-close{position: absolute; right: 17px; top: 16px; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.208); border-radius: 50%; width: 45px; height: 45px; background: var(--ink); color: var(--paper); font-size: 26px; transition: transform 0.25s;}
.dialog-close:hover{transform: rotate(90deg);}
.dialog-layout{display: grid; grid-template-columns: 0.9fr 1.1fr;}
.dialog-intro{background: var(--red); color: var(--ink); padding: 58px 40px 35px; position: relative; overflow: hidden; min-height: 620px;}
.dialog-kicker{font-size: 13px;}
.dialog-intro h2{font-size: 62px; margin: 40px 0px 25px; letter-spacing: -0.065em;}
.dialog-intro h2 span{color: var(--paper);}
.dialog-intro > p{font-size: 16px; line-height: 1.7; max-width: 300px;}
.dialog-art{height: 160px; position: relative; margin-top: 30px;}
.dialog-art > span{font-size: 160px; line-height: 1; display: block;}
.dialog-art i{position: absolute; top: 75px; left: 100px; right: -100px; height: 1px; background: rgba(17, 17, 17, 0.333); transform: rotate(-20deg);}
.dialog-art i:last-child{transform: rotate(20deg);}
.dialog-layout form{padding: 75px 40px 35px;}
.project-types{border: 0px; padding: 0px; margin: 0px 0px 32px; display: flex; flex-wrap: wrap; gap: 8px;}
.project-types legend{font-size: 13px; margin-bottom: 15px;}
.project-types label{margin: 0px; position: relative;}
.project-types input{position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0px;}
.project-types span{display: flex; align-items: center; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 25px; padding: 10px 14px; font-size: 12px; transition: color 0.2s, background 0.2s;}
.project-types input:checked + span{background: var(--paper); color: var(--ink); border-color: var(--paper);}
.project-types input:focus-visible + span{outline: 2px solid var(--red); outline-offset: 3px;}
.form-pair{display: grid; grid-template-columns: 1fr 1fr; gap: 22px;}
.dialog-layout input, .dialog-layout textarea{font-size: 15px;}
.dialog-layout textarea{min-height: 120px;}
.dialog-layout form > button{margin-top: 20px;}
.dialog-layout #brief-status{min-height: 38px;}
body.dialog-open{overflow: hidden;}
.services{position: relative; isolation: isolate; overflow: clip;}
@media (max-width: 700px) {header{gap: 10px; min-height: 84px; height: auto; flex-wrap: nowrap; padding: 12px 0px;}
header nav{display: none;}
.header-actions{margin-left: auto; gap: 5px;}
.header-actions > .contact-link{padding: 11px 15px; font-size: 12px; gap: 12px;}
#language-toggle{font-size: 10px; padding: 8px; gap: 5px;}
.wordmark{font-size: 28px;}
.wordmark span{font-size: 22px;}
#contact-dialog{width: calc(100% - 20px); max-height: calc(-20px + 100vh);max-height: calc(-20px + 100svh);}
.dialog-layout{grid-template-columns: 1fr;}
.dialog-intro{min-height: 0px; padding: 35px 25px 30px;}
.dialog-intro h2{font-size: 44px; margin: 25px 0px 18px; max-width: 280px;}
.dialog-intro > p{font-size: 14px; max-width: 90%;}
.dialog-art{display: none;}
.dialog-layout form{padding: 30px 25px;}
.dialog-close{right: 12px; top: 12px;}
.form-pair{grid-template-columns: 1fr; gap: 0px;}
.dialog-layout input, .dialog-layout textarea{font-size: 16px;}
.dialog-kicker{font-size: 12px;}
.services-heading{margin-bottom: 45px;}}
@media (max-width: 350px) {.header-actions > .contact-link{padding: 10px; gap: 7px;}
.wordmark{font-size: 25px;}
.wordmark span{font-size: 19px;}
.header-actions{gap: 0px;}}
.services{background: var(--paper); color: var(--ink); overflow: visible; padding-bottom: 100px;}
.services .chapter > span{color: rgb(104, 103, 95);}
.services-heading{margin-bottom: 80px;}
.case-stack{position: relative; padding-bottom: 1px;}
.case-card{--cover: 0; position: sticky; top: 35px; display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; margin-bottom: 24vh; overflow: hidden; border-radius: 18px; transform: scale(calc(1 - var(--cover)*.045)); transform-origin: 50% 0px; box-shadow: rgba(17, 17, 17, 0.067) 0px 0px 0px 1px, rgba(17, 17, 17, 0.133) 0px 25px 70px;}
.case-card:last-child{margin-bottom: 0px;}
.case-operations{background: rgb(23, 23, 22); color: var(--paper);}
.case-portal{background: var(--red); color: var(--ink); top: 49px;}
.case-product{background: rgb(233, 230, 221); color: var(--ink); top: 63px;}
.case-copy{padding: 55px 10% 55px 11%; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 1;}
.case-type{font-size: 13px; margin-bottom: 65px;}
.case-copy h3{font-size: clamp(35px, 4vw, 61px); line-height: 1.05; letter-spacing: -0.055em; font-weight: 500; margin: 0px 0px 30px;}
.case-copy > p{font-size: 18px; line-height: 1.65; max-width: 390px;}
.case-link{margin-top: auto; padding-top: 40px; display: flex; align-items: center; gap: 30px; min-height: 48px; font-size: 13px;}
.case-link > span{font-size: 25px; transition: transform 0.3s;}
.case-link:hover > span{transform: translate(5px, -5px);}
.case-visual{position: relative; min-height: 650px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 65px 10%; isolation: isolate;}
@media (min-width: 1700px) {.case-card, .case-visual{min-height: 720px;}}
@media (max-width: 1000px) {.case-copy{padding: 40px 9%;}
.case-copy h3{font-size: 37px;}
.case-copy > p{font-size: 16px;}
.case-type{margin-bottom: 45px;}
.case-visual{padding: 65px 8%;}}
@media (max-width: 699px) {.services-heading{margin-bottom: 45px;}
.case-card{position: relative; top: auto; grid-template-columns: 1fr; min-height: 0px; border-radius: 12px; margin-bottom: 40px; transform: none;}
.case-copy{padding: 30px 27px;}
.case-type{margin-bottom: 32px; font-size: 12px;}
.case-copy h3{font-size: 36px;}
.case-copy > p{font-size: 16px;}
.case-link{padding-top: 25px;}
.case-visual{min-height: 400px; padding: 70px 35px 40px;}
.services{padding-bottom: 55px;}
@supports (animation-timeline:view()) {.case-card{animation-duration: auto; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: case-enter; animation-timeline: view(); animation-range: entry entry 30%;}
@keyframes case-enter { 
  0% { opacity: 0.5; transform: translateY(40px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}}}
@media (prefers-reduced-motion: reduce) {.case-card{position: relative; top: auto; transform: none !important;}
}
@media (max-height: 739px) {.case-card{position: relative; top: auto; margin-bottom: 45px; transform: none !important;}}
.hero{min-height: calc(-96px + 100vh);min-height: calc(-96px + 100svh); display: flex; flex-direction: column; justify-content: center; padding-top: 65px; padding-bottom: 105px;}
.hero h1{margin: 0px; position: relative; z-index: 1; transform: translateY(clamp(-72px, -6vh, -34px));}
.hero-bottom{position: absolute; z-index: 1; bottom: 32px; left: var(--gutter); right: var(--gutter); margin: 0px; display: flex; justify-content: center; align-items: center;}
.hero .scroll-link{display: flex; gap: 15px; align-items: center; min-height: 45px; font-size: 13px; color: var(--muted);}
.hero .scroll-link > span:last-child{font-size: 22px; color: var(--paper); transition: transform 0.25s;}
.hero .scroll-link:hover > span:last-child{transform: translateY(4px);}
@media (max-width: 700px) {.hero{min-height: calc(-84px + 100vh);min-height: calc(-84px + 100svh); padding-top: 55px; padding-bottom: 115px;}
.hero h1{margin: 0px; font-size: 11.6vw; transform: translateY(-22px);}
.hero-bottom{bottom: 25px; flex-direction: row;}
.hero .scroll-link{font-size: 12px;}
}
@media (max-height: 500px) {.hero{min-height: calc(-84px + 100vh);min-height: calc(-84px + 100svh); padding-top: 30px; padding-bottom: 80px;}
.hero h1{font-size: clamp(42px, 7.5vw, 74px); transform: translateY(-14px);}}
.opening{min-height: auto; padding-top: 110px; padding-bottom: 145px; overflow: hidden;}
.opening-copy{margin: 80px 0px 0px 16%; max-width: 1080px;}
.opening-copy h2{font-size: clamp(58px, 7.3vw, 112px);}
.story-motion, .reality-motion{opacity: var(--story-opacity,1); transform: translate3d(0,var(--story-offset,0px),0);}
.story-rule{width: min(720px, 82%); height: 1px; margin: 50px 0px 42px; background: rgba(255, 255, 255, 0.125); transform: none;}
.story-rule i{display: block; width: 100%; height: 2px; background: var(--red); transform: scaleX(var(--story-progress,0)); transform-origin: left center;}
.story-lines, .reality-lines{display: flex; flex-direction: column; align-items: flex-start;}
.story-lines{gap: 7px;}
.story-lines .story-motion, .reality-lines .reality-motion{display: block;}
.opening-copy > .small-copy{margin-top: 34px; margin-left: 48%; max-width: 390px;}
.opening::after{content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);}
.reality{padding-top: 95px; padding-bottom: 75px;}
.reality h2{margin-top: 70px;}
.reality-bottom{margin-top: 55px;}
.reality-lines{gap: 6px;}
@media (max-width: 900px) {.opening-copy{margin-left: 8%;}
.opening-copy > .small-copy{margin-left: 40%;}}
@media (max-width: 600px) {.opening{padding-top: 70px; padding-bottom: 90px;}
.opening-copy{margin: 52px 0px 0px;}
.opening-copy h2{font-size: 12vw;}
.story-rule{margin: 34px 0px 30px; width: 100%;}
.story-lines{gap: 4px;}
.opening-copy > .lead{font-size: 17px; margin-top: 0px;}
.opening-copy > .small-copy{margin: 28px 0px 0px; max-width: 92%;}
.reality{padding-top: 65px; padding-bottom: 35px;}
.reality h2{margin-top: 50px;}
.reality-bottom{margin-top: 35px;}
.reality-lines{gap: 5px;}}
@media (prefers-reduced-motion: reduce) {.story-motion, .reality-motion{opacity: 1 !important; transform: none !important;}
.story-rule i{transform: none !important;}}
.story-heading-line{display: block; opacity: calc(.45 + var(--story-progress,1)*.55);}
.statement :focus-visible, .case-portal :focus-visible{outline-color: var(--ink);}
.dialog-close{position: sticky; display: block; top: 16px; right: auto; margin: 16px 17px -61px auto;}
@media (max-width: 700px) {.dialog-close{top: 12px; margin: 12px 12px -57px auto;}}
.statement h2 > .statement-line{display: block; color: inherit;}
.statement h2 > .statement-line:last-child{color: var(--paper);}
.motion-ready .scroll-reveal{animation: auto ease 0s 1 normal none running none; opacity: 0; transform: translate3d(0px, 48px, 0px); transition-behavior: normal, normal; transition-duration: 0.75s, 0.85s; transition-timing-function: ease, cubic-bezier(0.2, 0.7, 0.2, 1); transition-property: opacity, transform; transition-delay: var(--reveal-delay,0ms);}
.motion-ready .case-copy > .scroll-reveal{transform: translate3d(32px, 24px, 0px);}
.motion-ready .scroll-reveal.is-revealed, .motion-ready .scroll-reveal:focus-visible{opacity: 1; transform: translate3d(0px, 0px, 0px);}
@media (max-width: 600px) {.motion-ready .scroll-reveal{transform: translate3d(0px, 30px, 0px);}}
@media (prefers-reduced-motion: reduce) {.motion-ready .scroll-reveal{opacity: 1 !important; transform: none !important; transition: none !important;}}
.motion-ready .scroll-reveal.is-revealed{transform: translate3d(0px, 0px, 0px);}
.case-copy{overflow: clip;}
.hero-field{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; opacity: 0.75; mask-image: linear-gradient(90deg, transparent, black 30%, black 90%, transparent);}
.hero h1{position: relative; z-index: 1;}
.hero-bottom{z-index: 1;}
@media (max-width: 600px) {.hero-field{opacity: 0.5; mask-image: linear-gradient(transparent, black 20%, black 85%, transparent);}}
.hero h1 .together{color: var(--red);}
.tool-scene{--connection: 1; position: relative; margin-top: 85px; padding: 45px 0px 32px; border-top: 1px solid rgba(17, 17, 17, 0.133);}
.tool-scene svg{display: block; width: 100%; height: 110px; margin-top: -42px; overflow: visible; fill: none;}
@media (max-width: 600px) {.tool-scene{margin-top: 48px; padding-top: 20px;}}
.untangle{height: 640px; margin-top: 75px; padding: 0px; border: 0px; isolation: isolate;}
.untangle .thread-art{position: absolute; inset: 0px; width: 100%; height: 500px; margin: 0px; overflow: visible;}
.loose-threads{fill: none; stroke: rgb(17, 17, 17); stroke-width: 0.8; opacity: calc(.22*(1 - var(--connection))); transform: rotate(calc(var(--connection)*8deg)); transform-origin: center center;}
.joined-threads{fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--connection)); opacity: var(--connection);}
.work-fragment{position: absolute; width: 185px; transform: translate(calc((1 - var(--connection))*var(--fx,0px)),calc((1 - var(--connection))*var(--fy,0px))) rotate(calc((1 - var(--connection))*var(--fr,0deg))); background: var(--paper); padding: 14px;}
.work-fragment > span:first-child{display: block; font-size: 12px; color: rgb(104, 104, 98); margin-bottom: 12px;}
.work-fragment strong{font-size: 26px; line-height: 1.1; display: block; font-weight: 500; letter-spacing: -1px;}
.work-fragment small{font-size: 12px;}
.fragment-sheet{left: 3%; top: 35px; --fx: 60px; --fy: 40px; --fr: -12deg;}
.fragment-order{right: 3%; top: 35px; --fx: -90px; --fy: 55px; --fr: 10deg;}
.fragment-payment{left: 3%; top: 285px; --fx: 50px; --fy: -70px; --fr: 8deg;}
.fragment-legacy{right: 3%; top: 285px; --fx: -60px; --fy: -40px; --fr: -9deg;}
.fragment-people{left: calc(50% - 92px); top: 365px; --fy: -120px; --fr: 5deg; text-align: center;}
.untangle-mark{position: absolute; left: 50%; top: 190px; transform: translateX(-50%) rotate(calc((1 - var(--connection))*100deg)) scale(calc(.4 + var(--connection)*.6)); font-size: 105px; line-height: 1; color: var(--red); opacity: var(--connection); background: var(--paper);}
.untangle-resolution{position: absolute; bottom: 10px; left: 0px; right: 0px; text-align: center; font-size: clamp(26px, 3.7vw, 55px); letter-spacing: -0.04em; opacity: var(--connection); transform: translateY(calc((1 - var(--connection))*25px));}
.untangle-resolution strong{font-weight: 400; color: var(--red); margin-left: 0.2em;}
@media (max-width: 600px) {.untangle{height: 580px; margin-top: 50px;}
.work-fragment{width: 115px; padding: 8px;}
.work-fragment strong{font-size: 18px; letter-spacing: -0.5px;}
.work-fragment > span:first-child, .work-fragment small{font-size: 10px;}
.fragment-sheet, .fragment-payment{left: 0px; --fx: 12px;}
.fragment-order, .fragment-legacy{right: 0px; --fx: -12px;}
.fragment-people{left: calc(50% - 57px); top: 360px;}
.untangle-mark{font-size: 65px; top: 215px;}
.untangle-resolution{font-size: 30px; bottom: 0px;}
.untangle-resolution strong{display: block;}}
@media (prefers-reduced-motion: reduce) {.work-fragment, .untangle-mark, .untangle-resolution{transform: none;}
.untangle-mark{margin-left: -40px;}}
.flowing-process{height: auto; padding-top: 80px; padding-bottom: 100px; overflow: hidden; isolation: isolate;}
.flowing-process::before{content: none;}
.flowing-process #approach-title{font-size: clamp(36px, 5vw, 74px); line-height: 1.05; margin: 65px 0px 75px; position: relative; z-index: 1;}
.process-line{--row: 1; position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 40px 0px 50px; display: grid; grid-template-columns: 22% 1fr 80px; align-items: center; gap: 20px;}
.process-line > span{font-size: 12px; color: rgb(170, 170, 170); align-self: start; padding-top: 10px;}
.process-line h3{margin: 0px; font-weight: 400; font-size: clamp(36px, 5.6vw, 82px); line-height: 1.05; letter-spacing: -0.05em; opacity: calc(.15 + var(--row)*.85); transform: translateX(calc((1 - var(--row))*65px));}
.process-line b{font-size: 55px; font-weight: 400; color: var(--red); opacity: var(--row); transform: rotate(calc((1 - var(--row))*-60deg));}
.process-ribbon{position: absolute; right: -8%; top: 15%; width: 50%; height: 85%; z-index: 0; pointer-events: none; opacity: 0.16;}
.process-ribbon svg{height: 100%; width: 100%; fill: none; stroke: var(--paper); stroke-width: 1;}
.process-ribbon path:nth-child(2){stroke: var(--red);}
.untangle .work-fragment{width: 190px; background: var(--paper); padding: 18px 10px;}
.untangle .work-fragment strong{font-size: clamp(18px, 2.1vw, 30px);}
@media (max-width: 600px) {.flowing-process{padding-top: 60px; padding-bottom: 60px;}
.flowing-process #approach-title{margin: 45px 0px 50px; font-size: 38px;}
.process-line{grid-template-columns: 1fr 35px; padding: 25px 0px 40px; gap: 18px;}
.process-line > span{grid-column: 1 / -1; padding: 0px;}
.process-line h3{font-size: 39px; transform: translateX(calc((1 - var(--row))*22px));}
.process-line b{font-size: 32px;}
.process-ribbon{width: 90%; right: -40%;}
.untangle .work-fragment{width: 120px; padding: 12px 5px;}
.untangle .fragment-people{left: calc(50% - 60px);}}
@media (prefers-reduced-motion: reduce) {.process-line h3, .process-line b{opacity: 1; transform: none;}}
@media (max-width: 600px) {.process-line h3{font-size: 34px;}}
.untangle .work-fragment{width: 26%; padding: 10px 5px; text-align: center;}
.untangle .fragment-sheet, .untangle .fragment-payment{left: -3%;}
.untangle .fragment-order, .untangle .fragment-legacy{right: -3%;}
.untangle .fragment-sheet, .untangle .fragment-order{top: 70px;}
.untangle .fragment-payment, .untangle .fragment-legacy{top: 320px;}
.untangle .fragment-people{left: 37%; top: 420px;}
.untangle .work-fragment strong{font-size: clamp(16px, 2vw, 29px); white-space: nowrap;}
.untangle-mark{top: 250px; line-height: 1; transform: translate(-50%,-50%) rotate(calc((1 - var(--connection))*100deg)) scale(calc(.4 + var(--connection)*.6));}
@media (max-width: 600px) {.untangle{height: 560px;}
.untangle .thread-art{height: 420px;}
.untangle .work-fragment{width: 34%;}
.untangle .fragment-sheet, .untangle .fragment-payment{left: -5%;}
.untangle .fragment-order, .untangle .fragment-legacy{right: -5%;}
.untangle .fragment-sheet, .untangle .fragment-order{top: 50px;}
.untangle .fragment-payment, .untangle .fragment-legacy{top: 270px;}
.untangle .fragment-people{left: 33%; top: 365px;}
.untangle .work-fragment strong{font-size: clamp(13px, 3.7vw, 17px);}
.untangle-mark{top: 210px;}
.untangle-resolution{font-size: clamp(25px, 7vw, 30px);}}
@media (prefers-reduced-motion: reduce) {.untangle-mark{margin-left: 0px; transform: translate(-50%, -50%);}}
@media (max-width: 600px) {.untangle .work-fragment{min-height: 58px; display: grid; place-items: center;}
.untangle .work-fragment strong{white-space: normal; text-wrap-style: balance; line-height: 1.2;}}
@media (max-width:699px){.case-copy>p{margin-bottom:20px}}
.contact-finale{padding-top: 75px; padding-bottom: 55px; position: relative; overflow: hidden;}
.contact-finale::before{content: none;}
.finale-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:center;gap:40px;margin:85px 0 80px;}
.contact-finale #contact-title{text-align:center;font-size:clamp(52px,7.5vw,118px); line-height: 0.95; letter-spacing: -0.065em; margin: 0px;}
.finale-cta{background: none; color: var(--paper); border: 0px; display: flex; flex-direction: column; gap: 24px; padding: 15px; flex-shrink: 0; min-width: 230px; font-size: 15px;}
.finale-arrow{display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%; background: var(--red); color: var(--ink); font-size: 105px; line-height: 1; position: relative; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s;}
.finale-arrow::before{content: ""; position: absolute; inset: -12px; border: 1px solid rgba(237, 48, 40, 0.25); border-radius: 50%; animation: 4s ease-in-out 0s infinite normal none paused invitation-breathe;}
.contact.in-view .finale-arrow::before{animation-play-state: running;}
.finale-cta:hover{background: none;}
.finale-cta:hover .finale-arrow{transform: rotate(45deg); background: var(--paper);}
.finale-cta:focus-visible{outline: 2px solid var(--paper); outline-offset: 8px; border-radius: 12px;}
.finale-bottom{border-top:1px solid #fff3;padding-top:30px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:center;gap:35px;text-align:center;}
.finale-bottom p{font-size: clamp(20px, 2vw, 28px); line-height: 1.45; margin: 0px; letter-spacing: -0.025em;}
.finale-bottom > span{font-size: 13px; color: rgb(170, 170, 170); max-width: 275px; text-align: right; line-height: 1.7;}
@keyframes invitation-breathe { 
  50% { transform: scale(1.09); opacity: 0.3; }
}
@media (max-width: 699px) {.contact-finale{padding-top: 55px; padding-bottom: 40px;}
.finale-main{grid-template-columns:1fr;margin:55px 0 45px;gap:40px;}
.contact-finale #contact-title{font-size: clamp(60px, 15vw, 98px);}
.finale-cta{padding:0;min-width:0;flex-direction:row;gap:25px;font-size:15px;justify-self:center;}
.finale-arrow{width: 90px; height: 90px; font-size: 55px; flex-shrink: 0;}
.finale-arrow::before{inset: -7px;}
.finale-bottom{grid-template-columns:1fr;gap:22px;}
.finale-bottom > span{text-align: left; max-width: 100%;}}
@media (prefers-reduced-motion: reduce) {.finale-arrow::before{animation: auto ease 0s 1 normal none running none !important;}
.finale-arrow{transition: none;}}

.case-visual{padding:0;background:#111110;color:var(--paper)}
.studio-portal{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:650px;width:100%;max-width:none;align-self:stretch;padding:45px;border:0;text-align:left;color:var(--paper);background:#111110;border-radius:0;box-shadow:none;overflow:hidden;isolation:isolate}
.studio-portal:focus-visible{outline:3px solid var(--paper);outline-offset:-8px}.portal-eyebrow{font-size:13px;position:relative;z-index:2}.portal-title{font-size:clamp(45px,5.2vw,80px);line-height:.95;letter-spacing:-.055em;position:relative;z-index:2;margin-top:auto;margin-bottom:35px;text-shadow:0 3px 30px #0009}
.portal-enter{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0 0;border-top:1px solid #ffffff70;font-size:clamp(23px,2.5vw,37px);letter-spacing:-.025em;position:relative;z-index:2}.portal-enter>span:last-child{display:grid;place-items:center;width:58px;height:58px;flex-shrink:0;background:var(--red);border-radius:50%;color:var(--ink);transition:transform .3s}.studio-portal:hover .portal-enter>span:last-child{transform:rotate(45deg)}
.portal-sculpture{position:absolute;width:310px;height:310px;top:105px;right:-10px;transform:rotate(-28deg);transition:transform .8s;z-index:0}.portal-sculpture i{position:absolute;inset:calc(var(--i)*8px);border:2px solid #ef382e;border-radius:43% 57% 35% 65%;transform:translateX(calc(var(--i)*4px)) rotate(calc(var(--i)*9deg));box-shadow:inset 2px 1px 0 #ffffff50;animation:portal-turn 12s ease-in-out infinite alternate paused}.portal-sculpture i:nth-child(1){--i:0}.portal-sculpture i:nth-child(2){--i:1}.portal-sculpture i:nth-child(3){--i:2}.portal-sculpture i:nth-child(4){--i:3}.portal-sculpture i:nth-child(5){--i:4}.portal-sculpture i:nth-child(6){--i:5}.portal-sculpture i:nth-child(7){--i:6}.portal-sculpture i:nth-child(8){--i:7}.portal-sculpture i:nth-child(9){--i:8}.portal-sculpture i:nth-child(10){--i:9}.portal-sculpture i:nth-child(11){--i:10}.portal-sculpture i:nth-child(12){--i:11}.cases-visible .portal-sculpture i{animation-play-state:running}.studio-portal:hover .portal-sculpture{transform:rotate(-10deg) scale(1.08)}
@keyframes portal-turn{to{rotate:55deg;border-radius:60% 40% 65% 35%}}
@media(max-width:699px){.design-study{padding:0}.studio-portal{min-height:490px;padding:28px}.portal-title{font-size:53px;margin-bottom:28px}.portal-sculpture{width:250px;height:250px;top:70px;right:-20px}.portal-enter{font-size:27px}.portal-enter>span:last-child{width:48px;height:48px}}
@media(max-width:700px){html{scroll-padding-top:18px}body{min-width:0;overflow-x:clip}.wrap{width:100%;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.experience-header{padding-top:max(18px,env(safe-area-inset-top));padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.studio-portal{border-radius:0 0 24px 24px}.portal-enter{min-height:52px}button,.text-link,.case-link,.footer-bottom a{touch-action:manipulation}}
@media(prefers-reduced-motion:reduce){.portal-sculpture i{animation:none!important}.portal-sculpture,.portal-enter>span:last-child{transition:none}}


.service-portal{flex:1;padding-top:45px}
.service-portal .portal-title{font-size:clamp(42px,4.8vw,74px)}
.software-sculpture{width:70%;height:350px;top:95px;right:-2%;transform:rotate(-18deg)}
.software-sculpture i{inset:calc(var(--i)*9px);border-radius:26px;transform:translate(calc(var(--i)*10px),calc(var(--i)*-3px)) skewY(14deg);animation-name:software-fold;animation-duration:9s}
@keyframes software-fold{to{rotate:-12deg;transform:translate(calc(var(--i)*3px),calc(var(--i)*2px)) skewY(-8deg)}}
.integration-sculpture{position:absolute;top:85px;right:-12%;width:105%;height:365px;overflow:visible;fill:none;stroke:var(--red);stroke-width:1.6;transform:rotate(-14deg)}
.integration-sculpture use{transform-origin:320px 200px;transform:scale(calc(1 - var(--i)*.038));animation:integration-flow 10s ease-in-out calc(var(--i)*-.28s) infinite alternate paused}
.integration-sculpture use:nth-of-type(4n){stroke:#e7e4db;stroke-opacity:.65}
.cases-visible .integration-sculpture use{animation-play-state:running}
@keyframes integration-flow{to{transform:scale(calc(.94 - var(--i)*.038)) rotate(8deg)}}
@media(min-width:1700px){.service-portal .portal-title{font-size:80px}.software-sculpture{height:390px}.integration-sculpture{height:410px}}
@media(min-width:700px) and (max-width:1050px){.service-portal{padding:35px 28px}.service-portal .portal-title{font-size:clamp(38px,4.6vw,50px)}.service-portal .portal-enter{font-size:24px;gap:12px}.software-sculpture{width:95%;height:300px;top:120px;right:-15%}.integration-sculpture{top:125px;height:285px;width:135%;right:-25%}}
@media(max-width:699px){.service-portal{padding:28px;min-height:510px}.service-portal .portal-title{font-size:clamp(36px,9.5vw,60px);margin-bottom:28px}.service-portal .portal-eyebrow{font-size:12px;max-width:85%}.software-sculpture{width:85%;height:260px;top:65px;right:-7%}.software-sculpture i{inset:calc(var(--i)*6px);border-radius:20px}.integration-sculpture{top:65px;height:260px;width:125%;right:-20%}.service-portal .portal-enter{font-size:clamp(22px,6.5vw,30px);gap:10px}}


.trust-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:65px;border-top:1px solid #ffffff25;padding-top:25px;font-size:13px;color:#aaa}.trust-principles b{display:block;font-size:27px;font-weight:400;color:var(--paper);margin-bottom:8px}
.nav-team{background:none;border:0;color:inherit;font:inherit;min-height:44px;padding:0;cursor:pointer}.team-invitation{background:none;border:0;color:var(--paper);display:flex;gap:25px;align-items:center;text-align:left;min-height:48px;font-size:14px;cursor:pointer}.team-invitation>span{color:var(--red);font-size:28px}
/* A single team composition; the profiles stay readable without hover or motion. */
#team-dialog{width:min(1160px,calc(100vw - 40px));max-width:none;max-height:calc(100svh - 40px);padding:0;background:var(--paper);color:var(--ink);border:0;border-radius:24px;overflow:auto;overscroll-behavior:contain;box-shadow:0 32px 120px #0009}
#team-dialog::backdrop{background:#080808d9;backdrop-filter:blur(10px)}
.team-layout{display:grid;grid-template-columns:.85fr 1.15fr;min-height:0}
.team-close{position:sticky;display:grid;place-items:center;float:right;top:18px;width:46px;height:46px;margin:18px 18px -64px 0;padding:0;border:1px solid #1113;border-radius:50%;background:var(--paper);color:var(--ink);z-index:3;transition:background .25s,transform .3s}
.team-close svg{width:22px;height:22px}.team-close:hover{background:#dedbd3;transform:rotate(90deg)}
.team-intro{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:48px;background:var(--ink);color:var(--paper);overflow:hidden}
.team-intro h2{position:relative;font-size:clamp(48px,5.4vw,76px);line-height:1;font-weight:450;letter-spacing:-.065em;margin:0;z-index:1}.team-intro h2>span{display:block}.team-intro h2>span:last-child{color:var(--red)}
.team-emblem{position:relative;width:250px;height:250px;align-self:center;margin:38px 0;color:var(--red)}.team-emblem::before,.team-emblem::after{content:"";position:absolute;inset:18%;border:1px solid #ef382e55;transform:rotate(45deg)}.team-emblem::after{inset:4%;border-color:#ef382e22}.team-emblem svg{position:relative;display:block;width:100%;height:100%}.team-emblem path{stroke-dasharray:108;stroke-dashoffset:0;transform-origin:120px 120px}.team-emblem path:nth-child(even){stroke:var(--paper)}
.team-promise{margin-top:auto;font-size:18px;line-height:1.45;letter-spacing:-.02em;color:#aaa9a4}.team-promise span{color:var(--paper)}
.team-people{display:flex;flex-direction:column;padding:58px 38px 28px}
.team-members{flex:1;display:flex;flex-direction:column;justify-content:center}
.team-person{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:24px;align-content:center;padding:21px 0;min-height:104px}.team-person+article{border-top:1px solid #1112}
.team-index{grid-row:span 2;position:relative;display:grid;place-items:center;align-self:center;width:64px;height:64px;font-size:20px;letter-spacing:-.06em;color:var(--ink);isolation:isolate}
.team-index::before{content:"";position:absolute;inset:4px;z-index:-1;border:1px solid #1114;border-radius:18px 4px 18px 4px;transform:rotate(-12deg);transition:transform .45s,background .45s}
.team-person:nth-child(2) .team-index::before{transform:rotate(12deg);border-radius:4px 18px 4px 18px}.team-person:nth-child(3) .team-index::before{transform:rotate(45deg);border-radius:12px}.team-person:nth-child(4) .team-index::before{transform:rotate(-25deg);border-radius:50% 10% 50% 10%}.team-person:nth-child(5) .team-index::before{transform:rotate(15deg);border-radius:50%}
.team-person h3{font-size:clamp(26px,2.7vw,36px);font-weight:450;line-height:1.08;letter-spacing:-.055em;margin:0}.team-person h3 span{display:inline}.team-person p{grid-column:2;font-size:12px;line-height:1.5;margin:8px 0 0;color:#595852}
@media(hover:hover){.team-person:hover .team-index::before{transform:rotate(0);background:var(--red);border-color:var(--red)}}
.team-contact{display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-top:1px solid #1113;background:none;color:var(--ink);padding:20px 0 0;margin-top:14px;text-align:left;font-size:16px;min-height:70px}.team-contact-arrow{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:var(--ink);font-size:28px;flex-shrink:0;transition:transform .3s}.team-contact:hover .team-contact-arrow{transform:rotate(45deg)}
.team-close:focus-visible,.team-contact:focus-visible{outline:2px solid var(--red);outline-offset:4px}
#team-dialog[open]{animation:team-reveal .4s var(--ease) both}
#team-dialog[open] .team-person{animation:team-reveal .55s var(--ease) both}
#team-dialog[open] .team-person:nth-child(2){animation-delay:.04s}#team-dialog[open] .team-person:nth-child(3){animation-delay:.08s}#team-dialog[open] .team-person:nth-child(4){animation-delay:.12s}#team-dialog[open] .team-person:nth-child(5){animation-delay:.16s}
#team-dialog[open] .team-emblem svg{animation:team-breathe 12s ease-in-out infinite}
@keyframes team-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes team-breathe{0%,100%{transform:rotate(-8deg) scale(.9)}50%{transform:rotate(8deg) scale(1)}}
@media(max-width:950px){.team-layout{grid-template-columns:.8fr 1.2fr}.team-intro{padding:38px 28px}.team-intro h2{font-size:52px}.team-people{padding:64px 24px 24px}.team-person{column-gap:16px}.team-person h3{font-size:28px}.team-emblem{width:210px;height:210px}}
@media(max-width:699px){#team-dialog{width:calc(100vw - 20px);max-height:calc(100svh - 20px);border-radius:20px}.team-layout{grid-template-columns:1fr;min-height:0}.team-close{top:12px;margin:12px 12px -58px 0}.team-intro{padding:30px 24px;min-height:238px}.team-intro h2{font-size:46px;max-width:210px}.team-emblem{position:absolute;right:-14px;bottom:4px;width:148px;height:148px;margin:0;opacity:.7;z-index:0}.team-promise{display:none}.team-people{padding:4px 22px 22px}.team-person{grid-template-columns:48px minmax(0,1fr);column-gap:18px;min-height:104px;padding:20px 0}.team-index{width:48px;height:48px;font-size:17px}.team-person h3{font-size:27px}.team-person h3 span{display:block}.team-person p{font-size:12px;margin-top:7px}.team-contact{font-size:15px}.team-contact-arrow{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){#team-dialog[open],#team-dialog[open] .team-person,#team-dialog[open] .team-emblem svg{animation:none}.team-index::before,.team-close,.team-contact-arrow{transition:none}}
/* Six profiles remain visible together instead of extending the dialog. */
.team-close{position:absolute;right:18px;top:18px;margin:0}
.team-intro{padding:36px}.team-intro h2{font-size:clamp(44px,5vw,64px)}
.team-emblem{width:190px;height:190px;margin:28px 0}
.team-people{padding:58px 32px 24px}.team-person{min-height:0;padding:14px 0;grid-template-columns:48px minmax(0,1fr);column-gap:18px}
.team-index{width:48px;height:48px;font-size:17px}.team-person h3{font-size:28px}.team-person p{margin-top:5px}
.team-contact{min-height:56px;margin-top:8px;padding-top:12px}
@media(max-width:699px){
 .team-close{right:12px;top:12px}.team-intro{min-height:0;padding:20px 22px}.team-intro h2{font-size:29px;max-width:200px}.team-emblem{width:100px;height:100px;right:55px;bottom:0;margin:0;opacity:.35}
 .team-people{padding:4px 18px 14px}.team-person{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:11px 0}.team-index{width:36px;height:36px;font-size:13px}.team-person h3{font-size:21px;line-height:1.1}.team-person h3 span{display:inline}.team-person p{font-size:11px;line-height:1.3;margin-top:4px}.team-contact{font-size:14px;min-height:52px;margin-top:4px;padding-top:8px}
}
@media(max-height:650px) and (max-width:699px){.team-intro{padding:14px 20px}.team-intro h2{font-size:24px}.team-person{padding:8px 0}.team-person h3{font-size:19px}.team-people{padding-bottom:10px}.team-emblem{width:80px;height:80px}}
@media(max-height:700px) and (min-width:700px){.team-intro{padding:28px}.team-intro h2{font-size:42px}.team-emblem{width:130px;height:130px;margin:20px 0}.team-person{padding:9px 0}.team-person h3{font-size:23px}.team-people{padding:54px 24px 18px}.team-promise{font-size:14px}}
@media(max-height:480px) and (min-width:700px){.team-layout{grid-template-columns:.55fr 1.45fr}.team-intro{padding:22px}.team-intro h2{font-size:32px}.team-emblem{width:100px;height:100px;margin:20px 0}.team-promise{display:none}.team-people{padding:48px 22px 12px}.team-members{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.team-person{grid-template-columns:1fr;padding:10px 0;align-content:start}.team-index{display:none}.team-person h3{font-size:20px}.team-person p{grid-column:1;font-size:11px}.team-person:nth-child(2){border-top:0}.team-contact{margin-top:0}}



@media(min-width:701px) and (max-width:1100px){header nav{gap:16px;font-size:12px}.header-actions{gap:14px}}

/* A native decorative layer also works when canvas creation is denied. */
.field-fallback:before,.field-fallback:after{content:"";position:absolute;width:min(65vw,650px);aspect-ratio:1;right:0;top:16%;border:1px solid #e8e5da45;border-radius:43% 57% 61% 39%;box-shadow:0 0 0 24px #e8e5da08,0 0 0 48px #e8e5da06,0 0 0 72px #e8e5da04;pointer-events:none;animation:field-orbit 18s linear infinite}
.field-fallback:after{animation-direction:reverse;animation-duration:27s;opacity:.5}
@keyframes field-orbit{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.field-fallback:before,.field-fallback:after{animation:none}}