/* Equal image rows. Article pages retain their existing Team-style design. */
body:not(.is-article) #main :is(.su-work,.sv-article-grid,.sv-dash-grid,.sv-story-pair){grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important;align-items:start!important}
body:not(.is-article) #main :is(.su-work,.sv-article-grid,.sv-dash-grid) > :is(.su-project,.su-story-card,.sv-dash-tile):nth-child(n){grid-column:auto!important;min-width:0!important}
body:not(.is-article) #main .su-work>.su-all{grid-column:1/-1!important}
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image,.sv-story-pair figure img):nth-child(n){aspect-ratio:4/3!important}
body:not(.is-article) #main .sv-story-pair figure:nth-child(n){margin-top:0!important}
body:not(.is-article) #main .sv-story-pair figure img{height:auto!important;width:100%!important;object-fit:cover!important}
/* The border draws on as the image eases forward; layout dimensions stay fixed. */
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image,.sv-story-pair figure,.su-founder,.sv-form-aside){position:relative}
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image){overflow:hidden;isolation:isolate}
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:3px solid #bdff63;clip-path:polygon(0 0,0 0,0 0,0 0);box-shadow:inset 0 0 20px #a9ff4922;transition:clip-path .65s cubic-bezier(.22,1,.36,1),box-shadow .65s ease}
body:not(.is-article) #main :is(.su-project,.su-story-card,.sv-dash-tile):is(:hover,:focus-within) :is(.su-project-image,.su-story-image,.sv-dash-image)::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 30px #a9ff4938}
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image) img{transition:transform 1s cubic-bezier(.22,1,.36,1)!important;transform:scale(1)!important}
body:not(.is-article) #main :is(.su-project,.su-story-card,.sv-dash-tile):is(:hover,:focus-within) :is(.su-project-image,.su-story-image,.sv-dash-image) img{transform:scale(1.075)!important}
/* Standalone editorial photos get the same treatment through a JS-created image frame. */
body:not(.is-article) #main .su-photo-frame{position:relative;display:block;overflow:hidden;isolation:isolate;min-width:0}
body:not(.is-article) #main .su-photo-frame::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border:3px solid #bdff63;clip-path:polygon(0 0,0 0,0 0,0 0);transition:clip-path .65s cubic-bezier(.22,1,.36,1);box-shadow:inset 0 0 25px #a9ff4925}
body:not(.is-article) #main .su-photo-frame:is(:hover,:focus-within)::after{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
body:not(.is-article) #main .su-photo-frame>img{display:block;width:100%;transition:transform 1s cubic-bezier(.22,1,.36,1)!important;transform:scale(1)!important}
body:not(.is-article) #main .su-photo-frame:is(:hover,:focus-within)>img{transform:scale(1.075)!important}
/* Dimensional slide reveals, without an opacity fade. Enabled only by the observer. */
@media(max-width:760px){body:not(.is-article) #main :is(.su-work,.sv-article-grid,.sv-dash-grid,.sv-story-pair){column-gap:10px!important}body:not(.is-article) #main :is(.su-project-caption h2,.su-story-card h3,.sv-dash-tile h3){font-size:clamp(17px,4.5vw,27px)!important;line-height:1.15!important}body:not(.is-article) #main .su-project-caption{grid-template-columns:1fr auto!important;gap:8px!important}body:not(.is-article) #main .su-project-caption>span:last-child{grid-column:1/-1!important;font-size:11px!important;padding-top:0!important}body:not(.is-article) #main :is(.su-story-card>p,.sv-dash-tile p){font-size:14px!important;line-height:1.45!important}body:not(.is-article) #main .su-story-meta{font-size:11px!important;flex-wrap:wrap;gap:4px!important}body:not(.is-article) #main .sv-story-pair figcaption{flex-direction:column;gap:5px;font-size:11px}.su-motion-page .su-scroll-item.su-scroll-ready{transform:translate3d(var(--su-slide-x,0px),55px,0) scale(.98) rotate(0deg)}.su-motion-page .su-scroll-item.su-scroll-in{transform:translate3d(0,0,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.su-motion-page .su-scroll-item.su-scroll-ready{transform:none!important;clip-path:none!important;transition:none!important}body:not(.is-article) #main :is(.su-photo-frame,.su-project-image,.su-story-image,.sv-dash-image)::after,body:not(.is-article) #main :is(.su-photo-frame,.su-project-image,.su-story-image,.sv-dash-image) img{transition:none!important}body:not(.is-article) #main :is(.su-photo-frame:hover>img,.su-project:hover img,.su-story-card:hover img,.sv-dash-tile:hover img){transform:none!important}}
body:not(.is-article) #main .sv-resource-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body:not(.is-article) #main .sv-resource-row>.su-photo-frame{aspect-ratio:4/3}
body:not(.is-article) #main .sv-resource-row>.su-photo-frame>img{height:100%;object-fit:cover}
@media(max-width:760px){body:not(.is-article) #main .sv-form-aside>.su-photo-frame{grid-row:1/3}body:not(.is-article) #main .sv-resource-row{gap:20px!important}body:not(.is-article) #main .sv-resource-row h3{font-size:clamp(18px,4.5vw,30px)!important}body:not(.is-article) #main .sv-resource-row p{font-size:14px!important}}

/* Footer is always rendered, with no scroll reveal or fade on any page. */
.su-footer,.su-footer *{opacity:1!important;visibility:visible!important;clip-path:none!important}
.su-footer .su-scroll-item{transform:none!important;transition:none!important;animation:none!important}
.su-footer-heading h2{font-size:clamp(34px,5.5vw,82px)!important;line-height:1.22!important;letter-spacing:-.045em!important;margin:30px 0 60px!important}
.su-footer-heading h2 a{color:#000!important;background:#bdff63;padding:0 .09em .035em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.su-footer-brand{color:#737373!important}
/* A highlighter stroke behind the small editorial labels. */
body:not(.is-article) #main .su-label{color:#000!important;font-weight:700!important;background:linear-gradient(to top,#bdff63 0%,#bdff63 90%,transparent 90%);padding:.05em .3em!important;box-decoration-break:clone;-webkit-box-decoration-break:clone;width:fit-content;max-width:100%;align-self:start;justify-self:start}
/* Decorative photos retain their zoom, but have no interactive border. */
body:not(.is-article) #main .su-photo-frame::after{content:none!important;display:none!important;border:0!important;box-shadow:none!important}
/* Only actual linked/button image cards receive the green border treatment. */
body:not(.is-article) #main :is(.su-project-image,.su-story-image,.sv-dash-image)::after{content:none!important}
body:not(.is-article) #main :is(a.su-project,a.su-story-card,.sv-dash-tile:has(a[href]),button) :is(.su-project-image,.su-story-image,.sv-dash-image)::after{content:""!important}
@media(max-width:760px){.su-footer-heading h2{font-size:clamp(30px,7.2vw,48px)!important;margin-bottom:45px!important}}
/* More breathing room between public sections; article/member/app layouts stay put. */
body.su-motion-page .su-intro{padding-bottom:clamp(110px,11vw,180px)}
body.su-motion-page .su-approach{padding-top:clamp(170px,17vw,270px);padding-bottom:clamp(140px,13vw,210px)}
body.su-motion-page .su-approach>.su-label{top:clamp(180px,17.7vw,280px)}
body.su-motion-page .su-services{grid-template-columns:1fr 1fr;gap:clamp(40px,9vw,150px);padding-bottom:clamp(150px,15vw,240px)}
body.su-motion-page .su-community{padding-bottom:clamp(130px,13vw,210px)}
body.su-motion-page .su-community>div:first-child{display:block}
body.su-motion-page .su-community>div:first-child p{max-width:650px!important}
body.su-motion-page #main .sv-introduction{margin-bottom:clamp(110px,11vw,180px)}
body.su-motion-page #main .sv-editorial-row{padding-top:clamp(140px,13vw,210px)}
body.su-motion-page #main .sv-wide-statement{margin-top:clamp(150px,15vw,240px)}
body.su-motion-page #main .sv-filter-heading{margin-bottom:70px}
.su-footer-brand{color:#fff!important;position:relative;display:flex;align-items:baseline;white-space:nowrap;letter-spacing:-.065em;font-size:29vw!important}
.su-footer-dot{color:#bdff63;display:inline-block;letter-spacing:0;line-height:inherit}
/* Expandable topic rows: keyboard, tap and pointer support share one state. */
.su-service-item{border-bottom:1px solid #333;padding:0 0 26px;margin:0 0 26px}
.su-service-list .su-service-item h2{margin:0!important;font-size:clamp(26px,3vw,44px)!important;line-height:1.05!important;font-weight:500!important;letter-spacing:-.04em!important}
.su-service-toggle{display:flex;align-items:baseline;gap:22px;width:100%;padding:0;border:0;background:transparent;color:#fff;text-align:left;font:inherit;letter-spacing:inherit;cursor:pointer}
.su-service-number{font-size:14px;letter-spacing:0;color:#999;flex-shrink:0}
.su-service-title{flex:1}
.su-service-plus{font-size:24px;font-weight:400;color:#999;transition:transform .5s cubic-bezier(.22,1,.36,1),color .3s}
.su-service-item.is-open .su-service-plus{transform:rotate(45deg);color:#bdff63}
.su-service-item.is-open .su-service-title{color:#bdff63}
.su-service-title{transition:color .3s}
.su-service-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s cubic-bezier(.22,1,.36,1)}
.su-service-panel>div{overflow:hidden;min-height:0;padding-left:38px}
.su-service-item.is-open .su-service-panel{grid-template-rows:1fr}
.su-service-panel p{font-size:17px!important;line-height:1.5!important;color:#aaa!important;padding-top:22px;margin:0 0 20px!important;max-width:540px!important}
.su-service-list .su-service-panel a{display:inline-flex!important;gap:10px!important;border:0!important;border-bottom:1px solid #bdff63!important;padding:0 0 5px!important;margin:0 0 8px!important;color:#bdff63!important;font-size:14px!important;line-height:1.4!important}
.su-service-toggle:focus-visible{outline:2px solid #bdff63;outline-offset:8px}
/* Automatic hero entrance: staggered letters rise and straighten into place. */
.su-home .su-hero h1.su-hero-animated{overflow:hidden;padding-bottom:.05em!important}
.su-hero-letter{display:inline-block;transform:translate(0,115%) rotate(8deg);transform-origin:0 100%;animation:su-hero-arrive 1.25s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--su-letter-index,0)*65ms + 70ms)}
@keyframes su-hero-arrive{from{transform:translate(0,115%) rotate(8deg)}to{transform:none}}
.su-approach .su-word-reveal{color:rgb(var(--su-word-shade,75),var(--su-word-shade,75),var(--su-word-shade,75));transition:color 100ms linear}
@media(max-width:760px){body.su-motion-page .su-services{grid-template-columns:1fr;gap:65px}body.su-motion-page .su-approach>.su-label{position:static;margin-bottom:32px}.su-service-panel>div{padding-left:30px}.su-service-toggle{gap:15px}.su-service-panel p{font-size:16px!important}.su-footer-brand{font-size:28.2vw!important}}
@media(prefers-reduced-motion:reduce){.su-hero-letter{animation:none!important;transform:none!important}.su-service-panel,.su-service-plus,.su-service-title,.su-word-reveal{transition:none!important}.su-approach .su-word-reveal{color:#fff!important}}

/* Rendering repair: no content depends on a clipped/persistent compositor layer. */
.su-motion-page .su-scroll-item,.su-motion-page .su-scroll-item.su-scroll-ready,.su-motion-page .su-scroll-item.su-scroll-ready.su-scroll-in{clip-path:none!important;backface-visibility:visible!important;transform:none!important;transition:none!important;will-change:auto!important}
.su-approach .su-word-reveal{transition:none!important;backface-visibility:visible;transform:none}

/* Homepage introduction: inset copy, shorter image gap and a matching green brand dot. */
.su-home .su-hero h1{font-size:29vw!important}
.su-hero-dot{color:#bdff63!important}
body.su-motion-page .su-home .su-intro{padding-left:clamp(22px,3vw,48px);padding-right:clamp(12px,2vw,32px);padding-bottom:clamp(45px,4.5vw,75px)}
.su-home .su-intro>.su-label{left:clamp(22px,3vw,48px)}
.su-intro .su-word-reveal{transition:none;transform:none;backface-visibility:visible}
@media(max-width:800px){.su-home .su-hero h1{font-size:28.2vw!important}body.su-motion-page .su-home .su-intro{padding-left:18px;padding-right:18px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){.su-intro .su-word-reveal{color:#fff!important}}
.su-hero-dot{display:inline-block;width:.13em;height:.13em;margin-left:.02em;border-radius:50%;background:#bdff63;color:transparent!important;line-height:1;vertical-align:baseline}

/* Homepage opening follows the same mobile header rhythm as collection pages. */
#main .su-home .su-home-ask{display:none}
@media(max-width:760px){
 #main .su-home .su-hero{padding-top:20px}
 #main .su-home .su-hero h1{margin-bottom:10px!important}
 body.su-motion-page #main .su-home .su-intro{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;
  padding:0 0 20px!important
 }
 #main .su-home .su-intro>.su-label{
  position:static;grid-column:1;grid-row:1;margin:0!important;align-self:center;
  font-size:12px!important;line-height:1.3!important
 }
 #main .su-home .su-intro>p{
  grid-column:1 / -1;grid-row:2;font-size:32px!important;line-height:1.06!important
 }
 #main .su-home .su-intro>.su-home-ask{
  display:inline-flex;grid-column:2;grid-row:1;align-self:center;justify-self:end;
  gap:6px;font-size:11px;font-weight:650;line-height:1.3;
  color:#fff;border:0;text-decoration:none;white-space:nowrap
 }
}

/* Full colour images and consistent green frame hover on linked cards. */
body #main img{filter:none!important}
body #main :is(.su-view,.sv-image-action){display:none!important}
