/* The full-page study: a consistent offset frame, native landscape footage. */
html{scroll-behavior:smooth;scroll-padding-top:30px}.wrap{width:min(1240px,90%)}nav{display:flex;gap:30px;font-size:12px}nav a:last-child{border-bottom:1px solid;padding-bottom:6px}nav a:hover{color:#748800}.hero{padding-top:35px;gap:50px;min-height:600px}.hero h1{font-size:clamp(70px,7.7vw,110px)}.assembly{width:340px;height:300px;margin-left:-180px;top:108px;--step-x:50;--step-y:-24;--step-z:-65}.stage{height:475px}.card-surface{padding:6px}.card-surface video{width:100%;height:auto;aspect-ratio:680/382;object-fit:contain;object-position:center;background:#151711}.card-surface .video-shade{inset:6px 6px auto;height:55px;background:linear-gradient(#0008,transparent)}.card-surface .frame-title{bottom:36px;left:18px;right:18px}.card-surface .frame-title b{font-size:24px}.card-surface .timeline{bottom:20px;left:18px;right:18px}.card-surface .frame-meta{top:17px;left:18px;right:18px}.caption{margin-top:0}.services{padding-bottom:30px}.brands{padding:35px 0 58px}.brands>.eyebrow{color:var(--muted);margin-bottom:30px}.brand-row{display:grid;grid-template-columns:repeat(6,1fr);gap:42px;align-items:center}.brand-row img{width:100%;max-height:35px;object-fit:contain;filter:grayscale(1);opacity:.75}.section{padding:90px 0}.section-kicker{display:flex;gap:32px;font-size:10px;letter-spacing:1.7px;text-transform:uppercase}.section-kicker>span:first-child{color:var(--muted)}h2{font-size:clamp(44px,5.15vw,72px);font-weight:500;line-height:1.04;letter-spacing:-.055em;margin:0}h3{font-weight:500;letter-spacing:-.035em}.section-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:end;margin:42px 0 48px}.section-intro>p{font-size:17px;line-height:1.7;max-width:420px;margin:0;color:var(--muted)}.approach{background:#e7e8df}.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.approach-grid article{border-top:1px solid #b6bbaa;padding-top:24px}.tiny-index{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.approach-grid h3{font-size:24px;margin:27px 0 15px}.approach-grid p,.channel-grid p{color:var(--muted);font-size:15px;line-height:1.7;margin:0}.team-section{background:var(--ink);color:var(--paper);overflow:hidden}.team-section .section-kicker>span:first-child{color:var(--lime)}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-top:52px;align-items:center}.team-intro{color:#b6b9ab;line-height:1.7;max-width:430px;font-size:17px;margin:30px 0}.team-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;max-width:430px}.team-tabs button{padding:17px 0;display:flex;justify-content:space-between;background:none;color:#b6b9ab;border:0;border-bottom:1px solid #44483a;cursor:pointer;text-align:left;font-size:13px}.team-tabs button span{font-size:10px}.team-tabs button[aria-selected=true]{color:var(--lime);border-color:var(--lime)}.team-object{position:relative;perspective:1300px;margin:30px 35px 30px 0}.team-backing{position:absolute;inset:0;background:var(--lime);transform:translate(27px,-22px) rotate(3deg);color:#455100;padding:13px;font-size:9px;letter-spacing:1px}.team-backing span{float:right}.team-panel{position:relative;background:#f2f0e8;color:var(--ink);padding:25px 30px;box-shadow:5px 5px 0 #a6aa99;transform:rotateY(-9deg) rotateZ(-3deg);min-height:425px}.panel-top,.panel-bottom{display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:1.2px}.cap-glyph{font-size:100px;letter-spacing:-9px;line-height:1.1;color:#aab092;margin:28px 0 12px}.team-panel h3{font-size:32px;line-height:1.1;margin:0 0 18px}.team-panel p{font-size:14px;line-height:1.7;color:var(--muted);min-height:72px;max-width:330px}.panel-bottom{border-top:1px solid var(--rule);padding-top:18px;margin-top:28px}.work-intro{grid-template-columns:1.5fr 1fr}.work-intro p{justify-self:end;font-size:14px}.campaign-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 45px}.campaign-media{position:relative;margin:0 10px 26px 0;isolation:isolate;background:var(--ink)}.campaign-media:before{content:"";position:absolute;inset:0;background:#d3d9b7;border:1px solid #b6bf98;transform:translate(9px,-9px);z-index:-1}.campaign-media video{display:block;width:100%;aspect-ratio:680/382;object-fit:contain;background:var(--ink)}.campaign-heading{display:flex;justify-content:space-between;align-items:center;gap:25px}.campaign-heading h3{font-size:28px;margin:0}.campaign>p{font-size:15px;line-height:1.7;color:var(--muted);min-height:102px;margin:20px 0 25px}.campaign-metrics{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);padding-top:20px;gap:20px}.campaign-metrics b{font-size:37px;letter-spacing:-1.5px;font-weight:500;display:block}.campaign-metrics span{font-size:11px;display:block;color:var(--muted);margin-top:6px}.channels-section{border-top:1px solid var(--rule)}.channel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px}.channel-mark{width:65px;height:76px;background:#dde2c7;position:relative;margin:15px 0 32px 6px;isolation:isolate}.channel-mark:before{content:"";position:absolute;inset:0;border:1px solid #88916e;transform:translate(7px,-7px);z-index:-1}.channel-mark span{position:absolute;inset:0;border:1px solid #919b76;background:var(--paper);display:flex;align-items:end;padding:8px;font-size:25px;letter-spacing:-1px}.channel-grid h3{font-size:32px;margin:0 0 10px}.channel-sub{font-size:11px;color:var(--muted);display:block;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--rule)}.contact-section{padding:30px 0 90px}.contact-card{position:relative;background:var(--lime);padding:45px 50px;isolation:isolate;margin-right:15px}.contact-card:before{content:"";position:absolute;inset:0;border:1px solid #788050;transform:translate(14px,-14px);z-index:-1}.contact-card .section-kicker>span:first-child{color:#556400}.contact-card h2{margin:45px 0}.contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.contact-bottom p{font-size:15px;line-height:1.7;margin:0}.contact-button{padding:20px 24px;background:var(--ink);color:var(--paper);display:flex;gap:45px;font-size:13px;white-space:nowrap}.site-footer{background:var(--paper);color:var(--ink);padding:0 0 35px}.site-footer .wrap{border-top:1px solid var(--rule);padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.site-footer .logo{font-size:25px}.site-footer .logo small{font-size:9px}
@media(max-width:1000px) and (min-width:701px){nav{gap:18px}.hero{gap:30px}.assembly{width:290px;height:273px;margin-left:-153px;--step-x:35}.card-surface .frame-title b{font-size:22px}.team-grid{gap:45px}.team-panel{padding:20px}.section-intro{gap:35px}.approach-grid,.channel-grid{gap:25px}.team-panel h3{font-size:28px}.campaign-grid{gap:50px 30px}.campaign>p{min-height:155px}}
@media(max-width:700px){html{scroll-padding-top:20px}header{height:80px}nav{gap:20px;font-size:11px}nav a:first-child,nav a:nth-child(2){display:none}.hero{min-height:0;gap:0;padding-top:35px}.hero h1{font-size:clamp(62px,15vw,96px)}.assembly{width:270px;height:255px;margin-left:-148px;top:62px;--step-x:30;--step-y:-17;--step-z:-50}.stage{height:365px}.card-surface .frame-title b{font-size:21px}.card-surface .frame-title{bottom:34px}.card-surface .frame-meta{font-size:8px}.caption{margin-left:0}.brands{padding:20px 0 40px}.brand-row{grid-template-columns:repeat(3,1fr);gap:28px}.brand-row img{max-height:25px}.section{padding:55px 0}.section-intro{grid-template-columns:1fr;gap:25px;margin:30px 0 35px}h2{font-size:clamp(38px,10vw,54px)}.section-intro>p{font-size:15px}.approach-grid,.channel-grid{grid-template-columns:1fr;gap:30px}.approach-grid h3{margin-top:18px}.team-grid{grid-template-columns:1fr;gap:30px;margin-top:35px}.team-intro{font-size:15px}.team-object{margin:20px 22px 10px 8px}.team-panel{padding:22px;min-height:410px}.team-panel h3{font-size:30px}.team-panel p{min-height:72px}.team-backing{transform:translate(18px,-15px) rotate(3deg)}.work-intro p{justify-self:start}.campaign-grid{grid-template-columns:1fr;gap:45px}.campaign>p{min-height:0;margin-top:16px}.campaign-heading h3{font-size:26px}.campaign-metrics b{font-size:33px}.channel-grid article{display:grid;grid-template-columns:75px 1fr;gap:0 20px}.channel-mark{grid-row:1/4;margin:8px 0 0 0;width:54px;height:66px}.channel-grid h3{font-size:28px}.channel-sub{line-height:1.5}.channel-grid p{grid-column:2}.contact-section{padding:20px 0 55px}.contact-card{padding:28px 23px;margin-right:10px}.contact-card:before{transform:translate(9px,-9px)}.contact-card .section-kicker{font-size:9px;gap:15px}.contact-card h2{font-size:39px;margin:30px 0}.contact-bottom{flex-direction:column;align-items:start;gap:25px}.contact-bottom p{font-size:14px}.contact-button{gap:30px;padding:18px 20px}.site-footer .wrap{display:grid;grid-template-columns:1fr 1fr;gap:25px 15px;font-size:10px}.site-footer .wrap>a:nth-child(2){text-align:right}.site-footer .wrap>a:last-child{text-align:right}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.brand-row img{filter:grayscale(1) brightness(0);opacity:.62}
@media(max-width:360px){.hero h1{font-size:57px}.assembly{width:240px;height:235px;margin-left:-133px;--step-x:24}.card-surface .frame-title b{font-size:19px}.card-surface .frame-meta{font-size:7px}.card-surface .timecode{font-size:8px}.contact-card h2{font-size:34px}.team-panel h3{font-size:26px}}
@media(min-width:701px) and (max-width:900px){.assembly{width:240px;height:235px;margin-left:-155px;--step-x:22;--step-y:-17;--step-z:-45}.card-surface .frame-title b{font-size:20px}.card-surface .frame-meta{font-size:8px}.card-surface .timecode{font-size:8px}}
@media(max-width:360px){.assembly{width:228px;height:230px;margin-left:-148px;--step-x:18;--step-z:-40}}

/* Resonint identity: the supplied monogram becomes the stamp on the system.
   Soft corners echo the mark while preserving the existing editorial structure. */
.resonint-logo{display:inline-flex;align-items:center;gap:11px;font-size:inherit;letter-spacing:0}
.brand-icon{display:block;width:40px;height:40px;overflow:hidden;border-radius:9px;flex:0 0 auto;background:#fff}
.brand-icon img{display:block;width:49px;height:49px;max-width:none;margin:-4.5px;mix-blend-mode:multiply}
.brand-name{font-size:22px;font-weight:600;letter-spacing:-.8px}
header .resonint-logo{font-size:inherit}
.sequence-card,.card-surface{border-radius:13px;overflow:hidden}
.card-brand{display:block;width:22px;height:22px;border-radius:5px;overflow:hidden;background:#fff}
.card-brand img{display:block;width:27px;height:27px;margin:-2.5px;mix-blend-mode:multiply}
.team-backing,.team-panel{border-radius:12px}
.campaign-media:before,.campaign-media video{border-radius:10px}
.contact-card,.contact-card:before{border-radius:14px}
.site-footer .resonint-logo{font-size:inherit}
.site-footer .brand-icon{width:32px;height:32px;border-radius:7px}
.site-footer .brand-icon img{width:39px;height:39px;margin:-3.5px}
.site-footer .brand-name{font-size:18px}
@media(max-width:700px){
  .resonint-logo{gap:8px}.brand-icon{width:34px;height:34px;border-radius:8px}.brand-icon img{width:42px;height:42px;margin:-4px}.brand-name{font-size:19px}
  .site-footer .resonint-logo{grid-column:auto}.site-footer .brand-name{font-size:16px}
}

/* Proof section motion: each project assembles from the same offset planes used
   in the hero, then remains interactive as a muted video preview. */
.work-section{overflow:clip}
.proof-motion .campaign{opacity:0;transform:translateY(58px);transition:opacity .8s ease,transform 1.05s cubic-bezier(.2,.75,.2,1);transition-delay:var(--proof-delay,0ms)}
.proof-motion .campaign:nth-child(2){--proof-delay:130ms}
.proof-motion .campaign:nth-child(3){--proof-delay:80ms}
.proof-motion .campaign:nth-child(4){--proof-delay:210ms}
.proof-motion .campaign.is-visible{opacity:1;transform:none}
.campaign-media{transform-origin:50% 60%;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.campaign-media:before{transition:transform .75s cubic-bezier(.2,.75,.2,1),background-color .35s ease}
.proof-motion .campaign:not(.is-visible) .campaign-media{transform:translate3d(-26px,22px,0) scale(.965)}
.proof-motion .campaign:not(.is-visible) .campaign-media:before{transform:translate(0,0)}
.campaign-heading,.campaign>p,.campaign-metrics{transition:opacity .65s ease,transform .8s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--proof-delay,0ms) + 260ms)}
.proof-motion .campaign:not(.is-visible) .campaign-heading,.proof-motion .campaign:not(.is-visible)>p,.proof-motion .campaign:not(.is-visible) .campaign-metrics{opacity:0;transform:translateY(18px)}
@media(hover:hover) and (pointer:fine){
  .campaign:hover .campaign-media{transform:translate3d(0,-7px,0) scale(1.012)}
  .campaign:hover .campaign-media:before{transform:translate(16px,-16px);background:var(--lime)}
  .campaign:hover .campaign-heading h3{transform:translateX(5px)}
  .campaign-heading h3{transition:transform .4s cubic-bezier(.2,.75,.2,1)}
}
@media(prefers-reduced-motion:reduce){
  .campaign,.campaign-media,.campaign-media:before,.campaign-heading,.campaign>p,.campaign-metrics,.campaign-heading h3{transition:none!important;transform:none!important;opacity:1!important}
}

/* Secondary brand color. Cobalt carries editorial structure and proof;
   acid green continues to signal motion, selection, and action. */
:root{--cobalt:#4b47ff}
.assembly:before{content:"";position:absolute;inset:0;background:var(--cobalt);border:1px solid #3430d8;border-radius:13px;transform:translate3d(88px,-43px,-190px);box-shadow:6px 6px 0 #3430d8}
.approach-grid article:nth-child(2){border-top-color:var(--cobalt)}
.approach-grid article:nth-child(2) .tiny-index{color:var(--cobalt)}
.work-section .section-kicker>span:first-child{color:var(--cobalt)}
.campaign-media:before{background:var(--cobalt);border-color:#3430d8}
.channel-grid article:nth-child(2) .channel-mark:before{background:var(--cobalt);border-color:var(--cobalt)}
.contact-card{background:var(--cobalt)}
.contact-card:before{background:var(--lime);border-color:#9fbf00}
@media(hover:hover) and (pointer:fine){
  .campaign:hover .campaign-media:before{background:var(--lime);border-color:#9fbf00}
}
@media(max-width:900px){.assembly:before{transform:translate3d(58px,-31px,-145px)}}
@media(max-width:700px){.assembly:before{transform:translate3d(50px,-29px,-125px)}}

/* Section headings now lead directly, without eyebrow labels. */
.section-intro,.team-grid,.contact-card h2{margin-top:0}