/* Alternate Retentiv palette study inspired by bright, human campaign work. */
:root{
  --paper:#fffefa;
  --ink:#141414;
  --lime:#dfff00;
  --muted:#64645f;
  --rule:#d8d8d2;
  --cobalt:#1555ff;
  --pink:#ff4fa3;
  --coral:#ff5b3d;
  --sky:#94ddff;
}

body{background:var(--paper)}
#retentiv-live-icons{position:fixed;left:0;top:0;z-index:9;display:block;pointer-events:none;will-change:transform;transform:translateZ(0)}
.live-3d-ready .is-live-3d{opacity:0;filter:none;animation:none!important;transform:none!important}
.live-phone-ready .contact-orbit{--orbit-x:50.5%;--orbit-y:44.5%}
.contact-phone-live{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
::selection{background:var(--pink);color:var(--ink)}
button:focus-visible,a:focus-visible{outline-color:var(--cobalt)}
header{border-bottom-color:var(--ink)}
nav a:last-child{border-bottom-color:var(--cobalt)}
nav a:hover{color:var(--cobalt)}

/* The moving stack carries the loudest palette moment. */
.sequence-card{background:var(--lime);border-color:#a8c000;box-shadow:6px 6px 0 #a8c000}
.assembly:before{background:var(--cobalt);border-color:#003ed1;box-shadow:6px 6px 0 #003ed1}
.assembly:after{content:"";position:absolute;inset:12%;z-index:-2;border:10px solid #003ed1;border-radius:20px;background:#080b14;box-shadow:0 0 0 9px var(--cobalt),0 18px 34px rgba(8,11,20,.28);transform:translate3d(150px,-72px,-245px) scale(.72);pointer-events:none}
.progress,.progress:after{background:var(--lime)}
.card-surface>.hero-frame-image{display:block;width:100%;height:auto;aspect-ratio:680/382;object-fit:cover;object-position:center;background:#151711}
.hero .assembly{height:270px}
@media(min-width:701px){.hero .stage{height:445px}}
.card-surface .timeline{bottom:68px}
.frame-channel{position:absolute;left:18px;right:18px;bottom:30px;display:flex;align-items:center;gap:8px;color:#fff}
.frame-channel-name{font-family:var(--font-accent);font-size:9px;font-weight:700;letter-spacing:.01em}
.card-surface .progress{transition:width .2s ease-out}
.services{border-top-color:var(--ink)}
.services span:first-child{color:var(--cobalt)}

/* A white gallery and cool-blue editorial field replace the muted neutrals. */
.brands{width:100%;max-width:none;padding:64px 0 70px;background:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
.brands-title{margin:0 0 72px}
.brand-marquee{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.brand-track{display:flex;width:max-content;will-change:transform;animation:brand-marquee 28s linear infinite}
.brand-row{display:flex;flex:0 0 auto;align-items:center;gap:0;padding:0}
.brand-row img{position:static;display:block;flex:0 0 250px;width:250px;max-width:none;height:46px;max-height:none;margin:0;padding:0 40px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.7;transform:none}
.brand-marquee:hover .brand-track{animation-play-state:paused}
@keyframes brand-marquee{to{transform:translateX(-50%)}}
.approach{background:#edf4ff}
.approach-grid article:nth-child(1){border-top-color:var(--cobalt)}
.approach-grid article:nth-child(2){border-top-color:var(--pink)}
.approach-grid article:nth-child(3){border-top-color:var(--coral)}
.approach-grid article:nth-child(1) .tiny-index{color:var(--cobalt)}
.approach-grid article:nth-child(2) .tiny-index{color:#d50070}
.approach-grid article:nth-child(3) .tiny-index{color:#d72b10}

/* The team portrait becomes the environment for this section. */
.team-section{position:relative;isolation:isolate;background:var(--ink);overflow:hidden}
.team-section:before{content:"";position:absolute;z-index:0;top:0;left:0;right:0;height:110px;background:linear-gradient(180deg,#030c2a 0%,rgba(3,12,42,.72) 34%,rgba(3,12,42,0) 100%);pointer-events:none}
.team-section-background{position:absolute;inset:0;z-index:-2;margin:0}
.team-section-background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 48%}
.team-section:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,24,.88) 0%,rgba(8,12,24,.73) 43%,rgba(8,12,24,.42) 72%,rgba(8,12,24,.58) 100%),linear-gradient(180deg,rgba(8,12,24,.18),rgba(8,12,24,.48))}
.team-section>.wrap{position:relative;z-index:1}
.team-section h2{text-shadow:0 2px 24px rgba(0,0,0,.28)}
.team-section .team-intro{color:rgba(255,255,255,.82)}
.team-tabs button{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.32);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.team-backing{background:var(--card-surface,var(--pink));color:var(--card-ink,#53102f);transition:background-color .22s ease,color .22s ease}
.team-panel{background:var(--card-surface,var(--paper));color:var(--card-ink,var(--ink));box-shadow:5px 5px 0 var(--card-shadow,var(--coral))}
.team-tabs button[aria-selected=true]{color:var(--lime);border-color:var(--lime)}
.cap-glyph{color:var(--cobalt)}

/* Each proof frame borrows one saturated campaign color. */
.campaign:nth-child(1) .campaign-media:before{background:var(--cobalt);border-color:#003ed1}
.campaign:nth-child(2) .campaign-media:before{background:var(--pink);border-color:#d81772}
.campaign:nth-child(3) .campaign-media:before{background:var(--coral);border-color:#cf2f18}
.campaign:nth-child(4) .campaign-media:before{background:var(--lime);border-color:#a8c000}
.campaign:nth-child(1) .campaign-heading span{color:var(--cobalt)}
.campaign:nth-child(2) .campaign-heading span{color:#d50070}
.campaign:nth-child(3) .campaign-heading span{color:#d72b10}
.campaign:nth-child(4) .campaign-heading span{color:#718000}
@media(hover:hover) and (pointer:fine){
  .campaign:nth-child(1):hover .campaign-media:before{background:var(--pink);border-color:#d81772}
  .campaign:nth-child(2):hover .campaign-media:before{background:var(--lime);border-color:#a8c000}
  .campaign:nth-child(3):hover .campaign-media:before{background:var(--sky);border-color:#48bfea}
  .campaign:nth-child(4):hover .campaign-media:before{background:var(--coral);border-color:#cf2f18}
}

.channel-grid article:nth-child(1) .channel-mark:before{background:var(--lime);border-color:#a8c000}
.channel-grid article:nth-child(2) .channel-mark:before{background:var(--cobalt);border-color:var(--cobalt)}
.channel-grid article:nth-child(3) .channel-mark:before{background:var(--coral);border-color:#cf2f18}
.channel-mark span{background:var(--paper);border-color:var(--ink)}

/* The closing portrait extends into one continuous orange field. */
.contact-section{padding:0;background:var(--coral)}
.contact-section>.wrap{width:100%;max-width:none}
.contact-card{background:transparent}
.contact-card:before{display:none}
.contact-button{background:var(--ink);color:var(--paper)}
.site-footer .wrap{border-top:0}

/* A bold campaign-led type system for this palette study. */
@font-face{
  font-family:"Archivo Black";
  src:url("fonts/archivo-black-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/dm-sans-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face{
  font-family:"Anton";
  src:url("fonts/anton-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Montserrat";
  src:url("fonts/montserrat-medium-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
:root{
  --font-display:"Archivo Black","Arial Black",sans-serif;
  --font-hero:"Anton","Arial Narrow","Archivo Black",sans-serif;
  --font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --font-accent:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
body,button{font-family:var(--font-body)}
.brand-name{font-family:var(--font-body);font-weight:700;letter-spacing:-.045em;transform:translateY(5px)}
.resonint-logo{align-items:flex-end}
.brand-copy{display:inline-flex;flex-direction:column;justify-content:center;min-width:0}
.brand-parent{margin-top:1px;font-family:"Montserrat",var(--font-body);font-size:7px;font-weight:500;line-height:1.1;letter-spacing:.075em;white-space:nowrap}
.site-footer .brand-parent{font-size:7px}
header .resonint-logo{gap:13px}
header .brand-icon{width:48px;height:48px;border-radius:10px}
header .brand-icon img{width:59px;height:59px;margin:-5.5px}
header .brand-name{font-size:28px}
header .brand-parent{font-size:8.5px}
.site-footer .brand-icon{width:36px;height:36px}
.site-footer .brand-icon img{width:44px;height:44px;margin:-4px}
.site-footer .brand-name{font-size:22px}

.hero h1,h2{
  font-family:var(--font-body);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.055em;
}
.hero h1{font-family:var(--font-body);font-size:clamp(66px,7.35vw,106px);font-weight:700;line-height:.9;letter-spacing:-.065em;margin-bottom:38px}
.hero-copy-flow{display:flex;flex-direction:column;align-items:flex-start}
.hero-copy-flow .intro{order:1}
.hero-cta{position:relative;display:block;overflow:hidden;width:138px;height:138px;border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .25s ease}
.hero-copy-flow .hero-cta{order:2}
.hero-cta-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:center;animation:hero-cta-spin 13s linear infinite}
.hero-cta-ring text{fill:currentColor;font-family:var(--font-accent);font-size:8.5px;font-weight:700;letter-spacing:.75px}
.hero-cta-ring circle{fill:currentColor}
.hero-cta-core{position:absolute;left:50%;top:50%;display:grid;width:98px;height:52px;place-items:center;border:2px solid var(--ink);border-radius:9px;background:var(--pink);color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:700;line-height:1;letter-spacing:-.025em;text-align:center;box-shadow:0 3px 0 var(--ink);transform:translate(-50%,-50%);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.hero-cta:hover{transform:translateY(-2px)}
.hero-cta:hover .hero-cta-core{background:var(--cobalt);color:#fff;box-shadow:0 4px 0 var(--ink);transform:translate(-50%,-50%) scale(1.04)}
.hero-cta:hover .hero-cta-ring{animation-duration:5s}
.hero-cta:active{transform:translateY(0)}
.hero-cta:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@keyframes hero-cta-spin{to{transform:rotate(360deg)}}
h2{font-size:clamp(48px,5.4vw,74px)}
.intro{font-size:18px;font-weight:500;line-height:1.55;letter-spacing:-.018em}

h3,.campaign-heading h3,.channel-grid h3,.team-panel h3{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-.045em;
}
.approach-grid h3{font-size:25px}
.approach-grid .tiny-index{font-family:var(--font-body);font-weight:600;letter-spacing:.075em}
.campaign-heading h3{font-size:30px}
.channel-grid h3{font-size:34px}
.team-panel h3{font-size:34px}

.services,nav,.tiny-index,.rear-top,.frame-meta,.timecode,.frame-title>span,
.panel-top,.panel-bottom,.team-tabs button span,.campaign-heading>span,
.campaign-metrics span,.channel-sub,.contact-button,.site-footer .wrap{
  font-family:var(--font-accent);
}
.services,.tiny-index,.panel-top,.panel-bottom,.campaign-heading>span,.channel-sub{
  font-weight:700;
  letter-spacing:.055em;
}
.frame-title b,.campaign-metrics b,.cap-glyph{
  font-family:var(--font-display);
  font-weight:400;
}
.frame-title b{letter-spacing:-.05em}
.campaign-metrics b{letter-spacing:-.055em}
.contact-button{font-weight:700;letter-spacing:-.02em}

@media(max-width:700px){
  .brands{padding:42px 0 48px}
  .brand-marquee{mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
  .brand-track{animation-duration:23s}
  .brand-row{gap:0;padding:0}
  .brand-row img{flex-basis:190px;width:190px;height:36px;padding:0 28px}
  .hero h1{font-size:clamp(48px,13vw,62px);line-height:.94;letter-spacing:-.05em;margin-bottom:28px}
  .hero-copy-flow{position:relative;display:flow-root;min-height:198px}
  .hero-copy-flow:before{content:"";float:right;width:136px;height:198px;shape-outside:circle(66px at 75px 129px)}
  .hero-copy-flow .intro{margin:0}
  .hero-cta{width:118px;height:118px}
  .hero-copy-flow .hero-cta{position:absolute;right:2px;top:70px;margin:0}
  .hero-cta-ring text{font-size:8px;letter-spacing:.65px}
  .hero-cta-core{width:84px;height:44px;border-radius:7px;font-size:13px;box-shadow:0 2px 0 var(--ink)}
  h2{font-size:clamp(39px,10.5vw,54px)}
  .intro{font-size:16px}
  .campaign-heading h3{font-size:27px}
  .channel-grid h3{font-size:29px}
  .team-panel h3{font-size:30px}
}

/* Photography is distributed through the narrative and uses the same offset
   planes as the motion and proof components. */
.section-photo{position:relative;margin:0;isolation:isolate;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.section-photo:before{content:"";position:absolute;inset:0;border:1px solid var(--ink);border-radius:11px;transform:translate(10px,-10px);z-index:-1}
.section-photo img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid var(--ink);border-radius:11px;background:#ddd}
.approach .wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"lead photo" "cards cards";gap:0}
.approach .section-intro{grid-area:lead;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;margin:0;padding:48px 50px;min-height:430px;background:var(--cobalt);color:#fff;border-radius:14px 0 0 14px}
.approach .section-intro>p{color:#fff;margin-top:40px}
.approach-title-line,.team-title-line{display:inline-flex;align-items:center;width:max-content}
.approach-object{position:relative;z-index:2;left:auto;right:auto;top:auto;display:block;flex:0 0 clamp(86px,8vw,112px);width:clamp(86px,8vw,112px);height:clamp(86px,8vw,112px);margin:-24px 0 -22px 12px;object-fit:contain;pointer-events:none;filter:drop-shadow(7px 10px 8px rgba(0,0,0,.2));transform-origin:center;animation:approach-object-float 5.7s cubic-bezier(.45,.05,.55,.95) -.8s infinite}
@keyframes approach-object-float{
  0%,100%{transform:perspective(650px) translate3d(0,0,0) rotateX(8deg) rotateY(-18deg) rotateZ(-10deg)}
  50%{transform:perspective(650px) translate3d(-4px,-9px,18px) rotateX(-8deg) rotateY(18deg) rotateZ(5deg)}
}
.approach-grid{grid-area:cards;margin-top:58px}
.approach-photo{grid-area:photo;width:100%;height:430px;margin:0}
.approach-photo:before{display:none}
.approach-photo img{border:0;border-radius:0 14px 14px 0;object-position:center 46%}

/* A creator-at-work image makes the technology feel native to the same world. */
.tech-section{position:relative;isolation:isolate;overflow:hidden;background:var(--cobalt);color:#fff}
.tech-section:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,14,57,.06) 42%,rgba(3,12,42,1) 100%),linear-gradient(90deg,rgba(5,20,74,.93) 0%,rgba(5,24,96,.86) 39%,rgba(5,24,96,.42) 65%,rgba(5,14,45,.28) 100%);pointer-events:none}
.tech-photo{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden}
.tech-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.tech-photo:before{content:"";position:absolute;inset:0 0 0 50%;z-index:1;background-image:linear-gradient(rgba(223,255,0,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(223,255,0,.09) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,black);pointer-events:none}
.tech-scan{position:absolute;z-index:2;top:0;bottom:0;left:54%;width:1px;background:linear-gradient(180deg,transparent 8%,rgba(223,255,0,.85) 40%,rgba(223,255,0,.12) 70%,transparent 92%);box-shadow:0 0 12px rgba(223,255,0,.45);animation:tech-scan 7.5s cubic-bezier(.45,.05,.55,.95) infinite;pointer-events:none}
.tech-scan:after{content:"";position:absolute;top:40%;left:-3px;width:7px;height:7px;border:1px solid var(--lime);background:var(--cobalt);transform:rotate(45deg)}
.tech-section .wrap{position:relative;z-index:1}
.tech-intro>p{color:rgba(255,255,255,.72)}
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.38);border-radius:14px;background:rgba(4,14,47,.56);backdrop-filter:blur(14px)}
.tech-grid article{display:flex;min-height:275px;flex-direction:column;padding:30px;border-right:1px solid rgba(255,255,255,.23)}
.tech-grid article:last-child{border-right:0}
.tech-card-top{display:flex;align-items:center;gap:18px;color:var(--lime);font-family:var(--font-accent);font-size:10px;font-weight:700;letter-spacing:.08em}
.tech-card-top i{position:relative;display:block;overflow:hidden;flex:1;height:1px;background:rgba(255,255,255,.25)}
.tech-card-top i:after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--lime);animation:tech-signal 4s cubic-bezier(.4,0,.2,1) infinite}
.tech-grid article:nth-child(2) .tech-card-top i:after{animation-delay:-1.35s;background:var(--pink)}
.tech-grid article:nth-child(3) .tech-card-top i:after{animation-delay:-2.7s;background:var(--coral);box-shadow:0 0 8px rgba(255,91,61,.72)}
.tech-grid h3{max-width:none;margin:auto 0 18px;font-size:29px;line-height:1.05}
.tech-grid p{max-width:310px;margin:0;color:rgba(255,255,255,.7);font-size:15px;line-height:1.65}
@keyframes tech-signal{0%{transform:translateX(-6px)}55%,100%{transform:translateX(320px)}}
@keyframes tech-scan{0%,10%{transform:translateX(0);opacity:0}18%{opacity:.72}72%{opacity:.72}82%,100%{transform:translateX(40vw);opacity:0}}

.team-grid{position:relative}
.team-object{margin-top:10px}
.team-object-3d{position:relative;z-index:4;left:auto;right:auto;top:auto;display:block;flex:0 0 clamp(104px,9vw,130px);width:clamp(104px,9vw,130px);height:clamp(104px,9vw,130px);margin:-30px 0 -28px 14px;object-fit:contain;pointer-events:none;filter:drop-shadow(8px 11px 9px rgba(0,0,0,.3));transform-origin:center;animation:team-object-float 6.2s cubic-bezier(.45,.05,.55,.95) -2.1s infinite}
@keyframes team-object-float{
  0%,100%{transform:perspective(700px) translate3d(0,0,0) rotateX(9deg) rotateY(-20deg) rotateZ(7deg)}
  50%{transform:perspective(700px) translate3d(3px,-10px,20px) rotateX(-9deg) rotateY(18deg) rotateZ(-8deg)}
}
.team-card-stack{position:relative;width:88%;margin:0 auto;z-index:2;isolation:isolate;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.team-deck-card{position:absolute;inset:0;border-radius:12px;padding:13px;background:var(--card-surface);color:var(--card-ink);font-family:var(--font-accent);font-size:9px;font-weight:700;letter-spacing:.055em;text-align:right;transform-origin:center;transition:background-color .22s ease,color .22s ease;will-change:transform}
.team-deck-card--back{z-index:-3;transform:translate(53px,-42px) rotate(6deg)}
.team-deck-card--middle{z-index:-2;transform:translate(40px,-32px) rotate(4.5deg)}
.team-card-stack .team-backing{z-index:-1}
.team-card-stack .team-panel{z-index:1;background:var(--card-surface);color:var(--card-ink);box-shadow:5px 5px 0 var(--card-shadow);will-change:transform,opacity}
.team-card-stack .team-panel{cursor:pointer}
.team-layer-card{padding:25px 30px;text-align:left;overflow:hidden}
.team-layer-card span{float:none}
.deck-panel-top,.deck-panel-bottom{display:flex;justify-content:space-between;gap:20px;font-family:var(--font-accent);font-size:9px;font-weight:700;letter-spacing:1.2px}
.deck-panel-glyph{margin:28px 0 12px;color:var(--card-accent);font-family:var(--font-display);font-size:100px;font-weight:400;letter-spacing:-9px;line-height:1.1}
.deck-panel-title{margin:0 0 18px;font-family:var(--font-body);font-size:34px;font-weight:700;letter-spacing:-.045em;line-height:1.1}
.team-layer-card p{min-height:72px;max-width:330px;margin:0;color:var(--card-muted);font-family:var(--font-body);font-size:14px;font-weight:400;letter-spacing:0;line-height:1.7}
.deck-panel-bottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--card-rule)}
.team-card-stack .cap-glyph{color:var(--card-accent);pointer-events:none}
.team-card-stack .team-panel p{color:var(--card-muted)}
.team-card-stack .panel-bottom{border-color:var(--card-rule)}
.team-card-stack .panel-top{position:relative;z-index:3;align-items:center;padding-right:0;line-height:1}
.panel-controls{display:inline-flex;align-items:center;gap:10px;line-height:1}
.cap-next{position:relative;z-index:4;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin:0;padding:0;border:1px solid var(--card-ink);border-radius:7px;background:var(--card-action);color:var(--card-action-ink);font-family:var(--font-body);font-size:17px;line-height:1;cursor:pointer;transform:none;transition:background-color .22s ease,color .22s ease,transform .2s ease}
.cap-next:hover{transform:translateX(2px) scale(1.04)}
.cap-next:disabled{cursor:default}
.cap-next:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.team-tabs button:disabled{cursor:default}

.team-card-stack.is-shuffling .team-panel:not(.team-panel-outgoing){animation:team-panel-enter .86s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
.team-card-stack .team-panel-outgoing{position:absolute;inset:0;z-index:5;pointer-events:none}
.team-card-stack.is-shuffling .team-panel-outgoing{animation:team-panel-exit .86s cubic-bezier(.4,0,.2,1) both}
.team-card-stack.is-shuffling .team-backing{animation:team-near-shuffle .86s cubic-bezier(.22,1,.36,1) both}
.team-card-stack.is-shuffling .team-deck-card--middle{animation:team-middle-shuffle .86s cubic-bezier(.22,1,.36,1) both}
.team-card-stack.is-shuffling .team-deck-card--back{animation:team-back-shuffle .86s cubic-bezier(.22,1,.36,1) both}
.team-card-stack.is-shuffling .cap-next{pointer-events:none}
@keyframes team-panel-enter{
  0%{transform:translate3d(27px,-22px,-10px) rotateY(-9deg) rotateZ(3deg) scale(.985)}
  100%{transform:translate3d(0,0,0) rotateY(-9deg) rotateZ(-3deg) scale(1)}
}
@keyframes team-panel-exit{
  0%{transform:translate3d(0,0,0) rotateY(-9deg) rotateZ(-3deg) scale(1);opacity:1}
  64%{opacity:1}
  100%{transform:translate3d(-92px,16px,28px) rotateY(-4deg) rotateZ(-10deg) scale(.965);opacity:0}
}
@keyframes team-near-shuffle{
  0%{transform:translate(40px,-32px) rotate(4.5deg)}
  100%{transform:translate(27px,-22px) rotate(3deg)}
}
@keyframes team-middle-shuffle{
  0%{transform:translate(53px,-42px) rotate(6deg)}
  100%{transform:translate(40px,-32px) rotate(4.5deg)}
}
@keyframes team-back-shuffle{
  0%{transform:translate(66px,-52px) rotate(7.5deg) scale(.985)}
  100%{transform:translate(53px,-42px) rotate(6deg) scale(1)}
}

/* One case study holds the stage; the brand rail brings the others through it. */
.campaign-grid.proof-carousel{position:relative;display:grid;grid-template-areas:"proof";grid-template-columns:1fr;gap:0;isolation:isolate}
.work-title{display:flex;align-items:center;min-width:0}
.work-title h2{flex:0 0 460px;max-width:460px}
.proof-object{z-index:4;display:block;flex:0 0 190px;width:190px;height:190px;margin:-34px 0 -42px -115px;object-fit:contain;pointer-events:none;filter:drop-shadow(7px 10px 8px rgba(53,16,31,.16));transform-origin:50% 60%;animation:proof-object-float 5.8s cubic-bezier(.45,.05,.55,.95) infinite}
.campaign-grid.proof-carousel .campaign{grid-area:proof;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.65fr);grid-template-areas:"media heading" "media copy" "media metrics";grid-template-rows:auto 1fr auto;column-gap:54px;align-items:start;visibility:hidden;opacity:0;pointer-events:none;transform:none;transition:none}
.campaign-grid.proof-carousel .campaign.is-active,.campaign-grid.proof-carousel .campaign.is-entering,.campaign-grid.proof-carousel .campaign.is-leaving{visibility:visible}
.campaign-grid.proof-carousel .campaign.is-active{z-index:1;opacity:1;pointer-events:auto}
.campaign-grid.proof-carousel .campaign.is-entering{z-index:2;animation:proof-enter-next .72s cubic-bezier(.2,.72,.16,1) both}
.campaign-grid.proof-carousel .campaign.is-leaving{z-index:1;animation:proof-leave-next .72s cubic-bezier(.4,0,.2,1) both}
.campaign-grid.proof-carousel[data-direction="prev"] .campaign.is-entering{animation-name:proof-enter-prev}
.campaign-grid.proof-carousel[data-direction="prev"] .campaign.is-leaving{animation-name:proof-leave-prev}
.campaign-grid.proof-carousel .campaign-media{grid-area:media;margin:0 10px 10px 0;border-radius:10px}
.campaign-grid.proof-carousel .campaign-heading{grid-area:heading;padding-top:5px}
.campaign-grid.proof-carousel .campaign>p{grid-area:copy;min-height:0;margin:27px 0 36px;font-size:16px}
.campaign-grid.proof-carousel .campaign-metrics{grid-area:metrics;align-self:end}
.proof-controls{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 50px;border-top:1px solid var(--ink)}
.proof-control{position:relative;display:block;padding:17px 8px 15px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--muted);font-family:var(--font-accent);font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:color .25s ease,background-color .25s ease}
.proof-control:after{content:"";position:absolute;left:0;right:14px;bottom:-1px;height:4px;background:var(--proof-color,var(--cobalt));transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.proof-control:nth-child(1){--proof-color:var(--cobalt)}
.proof-control:nth-child(2){--proof-color:var(--pink)}
.proof-control:nth-child(3){--proof-color:var(--coral)}
.proof-control:nth-child(4){--proof-color:var(--lime)}
.proof-control[aria-current="true"]{color:var(--ink)}
.proof-control[aria-current="true"]:after{transform:scaleX(1)}
.proof-control:hover{color:var(--ink)}
@keyframes proof-enter-next{from{opacity:0;transform:translate3d(52px,0,0)}to{opacity:1;transform:none}}
@keyframes proof-leave-next{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-38px,0,0)}}
@keyframes proof-enter-prev{from{opacity:0;transform:translate3d(-52px,0,0)}to{opacity:1;transform:none}}
@keyframes proof-leave-prev{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(38px,0,0)}}
@keyframes proof-object-float{
  0%,100%{transform:perspective(700px) translate3d(0,0,0) rotateX(7deg) rotateY(-18deg) rotateZ(-6deg)}
  50%{transform:perspective(700px) translate3d(0,-9px,18px) rotateX(-8deg) rotateY(16deg) rotateZ(5deg)}
}

.channels-body{position:relative;display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.7fr);gap:0;align-items:stretch;background:var(--pink);border-radius:14px;box-shadow:10px -10px 0 var(--lime);overflow:hidden}
.channel-icon-slot{display:grid;width:96px;height:96px;margin:0 0 22px;place-items:center}
.channel-grid h3{display:block}
.channel-object{display:block;width:96px;height:96px;margin:0;object-fit:contain;pointer-events:none;filter:drop-shadow(5px 7px 6px rgba(53,16,31,.2));transform-origin:center;animation:channels-object-float 5.8s cubic-bezier(.45,.05,.55,.95) infinite}
.channel-grid article:nth-child(2) .channel-object{animation-delay:-1.8s}
.channel-grid article:nth-child(3) .channel-object{animation-delay:-3.4s}
.channels-photo{height:100%;min-height:430px;max-width:none}
.channels-photo:before{display:none}
.channels-photo img{border:0;border-radius:14px 0 0 14px;object-position:center 43%}
.channels-body .channel-grid{padding:42px 38px;gap:28px;align-items:center}
.channels-body .channel-grid p,.channels-body .channel-sub{color:#4b1830}
.channels-body .channel-sub{border-color:#c72d74}
@keyframes channels-object-float{
  0%,100%{transform:perspective(600px) translate3d(0,0,0) rotateX(8deg) rotateY(-19deg) rotateZ(7deg)}
  50%{transform:perspective(600px) translate3d(3px,-10px,16px) rotateX(-8deg) rotateY(18deg) rotateZ(-7deg)}
}
.contact-card.contact-card--photo{display:block;position:relative;padding:0;overflow:hidden;min-height:700px;margin:0;border-radius:0;isolation:isolate}
.contact-copy{position:relative;z-index:2;width:58%;min-height:700px;padding:68px 20px 58px max(5vw,calc((100vw - 1240px)/2));display:flex;flex-direction:column}
.contact-card--photo h2{margin:0 0 28px}
.contact-card--photo h2>span{display:block}
.contact-card--photo .contact-bottom{display:block;margin-top:0}
.contact-card--photo .contact-bottom>p{max-width:285px}
.contact-photo{position:absolute;z-index:0;inset:0;width:100%;min-height:0;margin:0;overflow:hidden}
.contact-photo picture{display:block;width:100%;height:100%}
.contact-photo:after{display:none}
.contact-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;background:var(--coral)}
.contact-orbit{--orbit-size:138px;--orbit-x:62.5%;--orbit-y:53%;position:absolute;right:clamp(135px,12vw,185px);bottom:34px;display:block;width:288px;height:463px;color:var(--ink);border-radius:32px;transform-style:preserve-3d;transform-origin:52% 57%;will-change:transform;animation:contact-phone-float 5.4s cubic-bezier(.45,.05,.55,.95) infinite}
.contact-phone{position:absolute;z-index:0;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(8px 13px 13px rgba(45,12,17,.22));pointer-events:none}
.contact-orbit:before{content:"";position:absolute;left:var(--orbit-x);top:var(--orbit-y);z-index:1;width:var(--orbit-size);height:var(--orbit-size);border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(20,20,20,.16);transform:translate(-50%,-50%) rotate(-3deg) scaleX(.88)}
.contact-orbit-text{position:absolute;z-index:2;left:var(--orbit-x);top:var(--orbit-y);width:var(--orbit-size);height:var(--orbit-size);overflow:visible;animation:contact-orbit-spin 13s linear infinite;transform:translate(-50%,-50%) rotate(-3deg) scaleX(.88) rotate(0deg);transform-origin:center}
.contact-orbit-text text{fill:currentColor;font-family:var(--font-accent);font-size:8.5px;font-weight:700;letter-spacing:.75px}
.contact-orbit-text .orbit-dot{fill:currentColor}
.contact-orbit-core{position:absolute;z-index:3;left:var(--orbit-x);top:var(--orbit-y);display:grid;width:100px;height:54px;place-items:center;white-space:nowrap;border:2px solid var(--ink);border-radius:9px;background:var(--pink);color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:-.025em;text-align:center;box-shadow:0 3px 0 var(--ink);transform:translate(-50%,-50%) scaleX(.88);transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.contact-orbit-core>span{display:block;line-height:1.02;text-align:center}
.contact-orbit:hover .contact-orbit-core{background:var(--cobalt);color:#fff;box-shadow:0 4px 0 var(--ink);transform:translate(-50%,-50%) scaleX(.88) scale(1.04)}
.contact-orbit:hover .contact-orbit-text{animation-duration:5s}
.contact-orbit:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@keyframes contact-orbit-spin{to{transform:translate(-50%,-50%) rotate(-3deg) scaleX(.88) rotate(360deg)}}
@keyframes contact-phone-float{
  0%,100%{transform:perspective(900px) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  34%{transform:perspective(900px) translate3d(2px,-12px,24px) rotateX(3.5deg) rotateY(-7deg) rotateZ(-2deg)}
  68%{transform:perspective(900px) translate3d(-2px,-5px,14px) rotateX(-2.5deg) rotateY(5deg) rotateZ(1.4deg)}
}

@media(max-width:1000px) and (min-width:701px){
  .approach .section-intro{padding:38px 35px;min-height:390px}
  .approach-photo{height:390px}
  .team-card-stack{width:94%;margin:0 auto}
  .channels-body{grid-template-columns:240px minmax(0,1fr)}
  .channels-body .channel-grid{grid-template-columns:1fr;gap:25px;padding:32px}
  .contact-card.contact-card--photo{min-height:650px}
  .contact-copy{width:62%;min-height:650px;padding:54px 20px 46px 5vw}
  .contact-photo{width:100%}
  .contact-orbit{right:100px}
  .tech-grid article{min-height:285px;padding:24px}
  .tech-grid h3{font-size:25px}
  .assembly:after{transform:translate3d(106px,-58px,-210px) scale(.74)}
}
@media(max-width:700px){
  header .resonint-logo{gap:9px}
  header .brand-icon{width:40px;height:40px;border-radius:9px}
  header .brand-icon img{width:49px;height:49px;margin:-4.5px}
  header .brand-name{font-size:23px}
  header .brand-parent{font-size:7.25px}
  .section-photo:before{transform:translate(6px,-6px);border-radius:8px}
  .section-photo img{border-radius:8px}
  .approach .wrap{grid-template-columns:1fr;grid-template-areas:"photo" "lead" "cards";gap:0}
  .approach .section-intro{padding:30px 24px 36px;min-height:0;border-radius:0 0 10px 10px}
  .approach .section-intro>p{margin-top:25px}
  .approach-title-line,.team-title-line{display:inline-flex;align-items:center;width:max-content}
  .approach-object{position:relative;left:auto;right:auto;top:auto;flex:0 0 70px;width:70px;height:70px;margin:-16px 0 -14px 10px}
  .approach-photo{width:100%;height:auto;aspect-ratio:1.55/1}
  .approach-photo img{border-radius:10px 10px 0 0;object-position:center 48%}
  .brands-title{margin-bottom:44px}
  .approach-grid{margin-top:42px}
  .team-object{margin-top:20px}
  .team-section-background img{object-position:43% center}
  .team-section:after{background:linear-gradient(180deg,rgba(8,12,24,.7) 0%,rgba(8,12,24,.78) 42%,rgba(8,12,24,.62) 100%)}
  .team-card-stack{width:94%;margin:0 auto}
  .team-object-3d{position:relative;left:auto;right:auto;top:auto;flex:0 0 72px;width:72px;height:72px;margin:-17px 0 -14px 10px}
  .team-layer-card{padding:22px}
  .deck-panel-glyph{font-size:90px;margin-top:26px}
  .deck-panel-title{font-size:30px}
  .team-deck-card--back{transform:translate(29px,-24px) rotate(5deg)}
  .team-deck-card--middle{transform:translate(23px,-19px) rotate(3.8deg)}
  @keyframes team-near-shuffle{
    0%{transform:translate(23px,-19px) rotate(3.8deg)}
    100%{transform:translate(18px,-15px) rotate(3deg)}
  }
  @keyframes team-middle-shuffle{
    0%{transform:translate(29px,-24px) rotate(5deg)}
    100%{transform:translate(23px,-19px) rotate(3.8deg)}
  }
  @keyframes team-back-shuffle{
    0%{transform:translate(35px,-29px) rotate(6.2deg) scale(.985)}
    100%{transform:translate(29px,-24px) rotate(5deg) scale(1)}
  }
  .campaign-grid.proof-carousel .campaign{grid-template-columns:1fr;grid-template-areas:"media" "heading" "copy" "metrics";grid-template-rows:auto;row-gap:0}
  .campaign-grid.proof-carousel .campaign-media{margin:0 7px 28px 0}
  .campaign-grid.proof-carousel .campaign-heading{padding-top:0}
  .campaign-grid.proof-carousel .campaign>p{margin:18px 0 25px;font-size:15px}
  .proof-controls{grid-template-columns:1fr 1fr;gap:0 18px;margin:0 0 22px}
  .proof-control{min-height:46px;gap:9px;padding:9px 6px 9px 0}
  .proof-control:after{right:10px;height:3px}
  .work-title{align-items:center}
  .work-title h2{flex-basis:200px;max-width:200px}
  .copy-refined .work-title h2{flex-basis:220px;max-width:220px}
  .proof-object{flex-basis:150px;width:150px;height:150px;margin:-25px -22px -34px -20px}
  .channels-body{display:flex;flex-direction:column;box-shadow:6px -6px 0 var(--lime);border-radius:10px}
  .channels-photo{width:100%;min-height:0;aspect-ratio:1.45/1}
  .channels-photo img{border-radius:10px 10px 0 0;object-position:center 43%}
  .channels-body .channel-grid{padding:30px 24px 36px;gap:30px}
  .channel-icon-slot{grid-column:1;grid-row:1/4;width:72px;height:72px;margin:0;align-self:start}
  .channel-object{width:72px;height:72px;margin:0}
  .contact-section{padding:0}
  .contact-card.contact-card--photo{min-height:830px}
  .contact-copy{width:100%;min-height:830px;padding:38px 22px 28px}
  .contact-card--photo h2{max-width:none;margin-bottom:22px;font-size:clamp(36px,10vw,40px)}
  .contact-card--photo h2>span{white-space:nowrap}
  .contact-photo{inset:0;width:100%;height:100%}
  .contact-photo:after{display:block;background:linear-gradient(180deg,var(--coral) 0%,rgba(255,91,61,.78) 18%,rgba(255,91,61,.08) 43%,rgba(255,91,61,.72) 67%,rgba(255,91,61,.94) 100%)}
  .contact-photo img{height:calc(100% + 82px);object-position:center bottom;transform:translateY(-82px)}
  .contact-card--photo .contact-bottom>p{position:relative;z-index:11;max-width:160px;font-size:13px;line-height:1.5}
  .contact-orbit{--orbit-size:114px;--orbit-x:61.5%;left:calc(50% - 112.5px);right:auto;top:295px;bottom:auto;width:225px;height:362px}
  .contact-orbit-core{width:82px;height:44px;border-radius:7px;font-size:12px;box-shadow:0 2px 0 var(--ink)}
  .contact-orbit-text text{font-size:8px;letter-spacing:.65px}
  .assembly:after{transform:translate3d(84px,-48px,-180px) scale(.76)}
  .tech-grid{grid-template-columns:1fr}
  .tech-grid article{min-height:220px;border-right:0;border-bottom:1px solid rgba(255,255,255,.23)}
  .tech-grid article:last-child{border-bottom:0}
  .tech-grid h3{margin-top:65px}
  .tech-photo img{object-position:64% center}
  .tech-section:after{background:linear-gradient(180deg,rgba(5,20,74,.91) 0%,rgba(5,24,96,.76) 42%,rgba(4,14,47,.73) 100%)}
  .tech-photo:before{inset:0;opacity:.55}
  .tech-scan{left:12%}
  .team-section{margin-top:-54px;padding-top:84px;clip-path:polygon(0 54px,100% 0,100% 100%,0 100%)}
  .team-section:before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .brand-marquee{overflow-x:auto;mask-image:none}
  .brand-track{animation:none}
  .team-card-stack.is-shuffling .team-panel,.team-card-stack.is-shuffling .team-backing,.team-card-stack.is-shuffling .team-deck-card,.team-card-stack.is-shuffling .cap-next{animation:none!important}
  .contact-orbit{animation:none}
  .contact-orbit-text{animation:none}
  .hero-cta-ring{animation:none}
  .proof-object,.team-object-3d,.channel-object,.approach-object{animation:none}
  .tech-scan,.tech-card-top i:after{animation:none}
}

@media(min-width:1001px){
  .hero .assembly{width:385px;height:340px;margin-left:-208px;top:74px}
}
@media(max-width:1000px) and (min-width:701px){
  .hero .assembly{width:315px;height:292px;margin-left:-171px;top:78px}
}
@media(max-width:700px){
  .hero .stage{height:330px}
  .hero .assembly{width:268px;height:252px;margin-left:-147px;top:44px}
}
@media(max-width:360px){
  .hero .assembly{width:250px;height:238px;margin-left:-138px}
}