/* The wordmark becomes an interactive set of architectural operations. */
.studio{grid-template-columns:.52fr 1.12fr 1.34fr;gap:clamp(30px,5vw,94px)}
.studio-operation{margin:0 0 24px;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.07em}
.brand-letters{display:flex;min-height:clamp(330px,32vw,500px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-letter{position:relative;display:flex;flex:1 1 0;min-width:0;align-items:center;justify-content:center;overflow:hidden;border-left:1px solid var(--line);background:transparent;color:#b2b2b6;isolation:isolate;transition:flex-grow .6s cubic-bezier(.16,1,.3,1),background-color .45s ease,color .3s ease}
.brand-letter:last-child{border-right:1px solid var(--line)}
.brand-letter::before{position:absolute;z-index:-1;inset:0;background:var(--ink);content:"";transform:scaleY(0);transform-origin:bottom;transition:transform .52s cubic-bezier(.16,1,.3,1)}
.brand-letter span{font-size:clamp(50px,7.2vw,128px);font-weight:720;line-height:.7;letter-spacing:-.15em;transform:translateX(-.06em);transition:transform .52s cubic-bezier(.16,1,.3,1)}
.brand-letter small{position:absolute;top:15px;left:14px;font-family:var(--sans);font-size:9px;font-weight:800;letter-spacing:.06em;opacity:.5}
.brand-letter:hover,.brand-letter:focus-visible{flex-grow:1.35;color:var(--ink);outline:none}
.brand-letter.is-selected{flex-grow:1.72;color:#fff}
.brand-letter.is-selected::before{transform:scaleY(1)}
.brand-letter.is-selected span{transform:translateX(-.06em) scale(1.08)}
.brand-letter:focus-visible{box-shadow:inset 0 0 0 3px var(--lime)}

@media(max-width:850px){.studio{grid-template-columns:1fr;gap:32px}.studio-operation{margin-bottom:17px;font-size:10px}.brand-letters{min-height:174px}.brand-letter small{top:10px;left:8px;font-size:7px}.brand-letter span{font-size:17vw}.brand-letter.is-selected{flex-grow:1.45}.brand-letter:hover{flex-grow:1}.brand-letter.is-selected:hover{flex-grow:1.45}}


/* 2026-09-09 / selected letter becomes a circle; inactive letters stay filleted */
.studio{grid-template-columns:minmax(430px,.92fr) minmax(640px,1.08fr)!important;gap:clamp(48px,7vw,118px)!important;align-items:center!important}
.studio>.section-index{grid-column:1/-1!important;width:100%!important;padding-bottom:15px!important;border-bottom:1px solid var(--line)!important}
.studio-copy{grid-column:1!important;max-width:620px!important;justify-self:start!important}
.studio-copy h2{font-size:clamp(46px,5.7vw,96px)!important;line-height:.84!important;letter-spacing:-.078em!important;text-wrap:balance!important}
.studio-copy p{max-width:430px!important;margin-top:28px!important;font-size:clamp(17px,1.45vw,22px)!important;line-height:1.22!important}
.brand-letters{grid-column:2!important;display:flex!important;align-items:center!important;gap:14px!important;min-height:clamp(280px,29vw,430px)!important;padding:22px!important;border:1px solid var(--line)!important;border-radius:28px!important;background:rgba(255,255,255,.26)!important;overflow:visible!important}
.brand-letter{height:clamp(170px,17vw,270px)!important;min-width:0!important;flex:1 1 0!important;border:1px solid var(--line)!important;border-radius:24px!important;background:#f5f5f6!important;color:#a6a7ad!important;overflow:hidden!important;transition:flex-basis .78s cubic-bezier(.16,1,.3,1),flex-grow .78s cubic-bezier(.16,1,.3,1),border-radius .78s cubic-bezier(.16,1,.3,1),transform .78s cubic-bezier(.16,1,.3,1),background-color .42s ease,color .42s ease!important}
.brand-letter:last-child{border-right:1px solid var(--line)!important}
.brand-letter::before{display:none!important}
.brand-letter span{font-size:clamp(54px,6.1vw,112px)!important;letter-spacing:-.11em!important;transform:translateX(-.04em)!important;transition:transform .78s cubic-bezier(.16,1,.3,1)!important}
.brand-letter small{display:none!important}
.brand-letter:hover,.brand-letter:focus-visible{flex-grow:1.08!important;color:#171718!important;background:#fff!important;outline:none!important}
.brand-letter.is-selected{flex:0 0 clamp(170px,17vw,270px)!important;aspect-ratio:1!important;border-radius:50%!important;background:#171718!important;color:#fff!important;transform:translateY(-10px)!important;box-shadow:0 26px 60px rgba(0,0,0,.16)!important}
.brand-letter.is-selected span{transform:translateX(-.04em) scale(1.02)!important}
.brand-letter:focus-visible{box-shadow:0 0 0 4px rgba(22,22,22,.08),0 26px 60px rgba(0,0,0,.16)!important}
@media(max-width:1050px){.studio{grid-template-columns:1fr!important}.studio-copy,.brand-letters{grid-column:1!important}.brand-letters{min-height:220px!important}.brand-letter{height:160px!important}.brand-letter.is-selected{flex-basis:160px!important}}
@media(max-width:850px){.studio{gap:30px!important}.brand-letters{gap:8px!important;padding:12px!important;border-radius:20px!important;min-height:138px!important}.brand-letter{height:104px!important;border-radius:16px!important}.brand-letter span{font-size:15vw!important}.brand-letter.is-selected{flex-basis:104px!important;transform:translateY(-5px)!important}.studio-copy h2{font-size:14.2vw!important}.studio-copy p{font-size:18px!important}}


/* 2026-09-09 / CRUDO letter selector: active circle beside rounded letter rail */
.brand-letters{
  position:relative!important;
  display:grid!important;
  grid-template-columns:clamp(176px,18vw,292px) repeat(4,minmax(94px,1fr))!important;
  align-items:center!important;
  gap:clamp(12px,1.3vw,18px)!important;
  min-height:clamp(260px,25vw,380px)!important;
  padding:clamp(18px,2vw,28px)!important;
  border-radius:28px!important;
  overflow:visible!important;
}
.brand-letter{
  flex:none!important;
  width:100%!important;
  height:clamp(168px,18vw,270px)!important;
  border-radius:26px!important;
  background:#f3f3f4!important;
  color:#a4a5ab!important;
  transform:none!important;
  box-shadow:none!important;
}
.brand-letter span{
  font-size:clamp(70px,8.2vw,138px)!important;
  line-height:1!important;
  letter-spacing:-.105em!important;
  color:currentColor!important;
}
.brand-letter.is-selected{
  grid-column:1!important;
  width:clamp(176px,18vw,292px)!important;
  height:clamp(176px,18vw,292px)!important;
  justify-self:start!important;
  align-self:center!important;
  border-radius:50%!important;
  background:#171718!important;
  color:#fff!important;
  transform:translateX(-2px)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.16)!important;
}
.brand-letter.is-selected span{
  font-size:clamp(78px,8.8vw,148px)!important;
  transform:translateX(-.04em) scale(1)!important;
}
.brand-letter:not(.is-selected){
  grid-column:auto!important;
}
.brand-letter:hover:not(.is-selected),.brand-letter:focus-visible:not(.is-selected){
  background:#fff!important;
  color:#7d7e84!important;
  transform:translateY(-4px)!important;
}
@media(max-width:1050px){
  .brand-letters{grid-template-columns:clamp(136px,24vw,190px) repeat(4,minmax(70px,1fr))!important;gap:10px!important;min-height:210px!important;padding:14px!important;border-radius:24px!important}
  .brand-letter{height:clamp(126px,22vw,170px)!important;border-radius:22px!important}
  .brand-letter span{font-size:clamp(52px,11vw,96px)!important}
  .brand-letter.is-selected{width:clamp(136px,24vw,190px)!important;height:clamp(136px,24vw,190px)!important}
  .brand-letter.is-selected span{font-size:clamp(62px,12vw,104px)!important}
}
@media(max-width:850px){
  .brand-letters{grid-template-columns:clamp(112px,31vw,146px) repeat(4,minmax(44px,1fr))!important;gap:7px!important;min-height:156px!important;padding:10px!important;border-radius:20px!important}
  .brand-letter{height:clamp(96px,28vw,124px)!important;border-radius:17px!important}
  .brand-letter span{font-size:clamp(42px,13vw,68px)!important}
  .brand-letter.is-selected{width:clamp(112px,31vw,146px)!important;height:clamp(112px,31vw,146px)!important;transform:translateX(-1px)!important}
  .brand-letter.is-selected span{font-size:clamp(54px,15vw,78px)!important}
}
@media(max-width:390px){
  .brand-letters{grid-template-columns:104px repeat(4,minmax(38px,1fr))!important;gap:6px!important;padding:8px!important}
  .brand-letter{height:92px!important;border-radius:15px!important}
  .brand-letter span{font-size:40px!important}
  .brand-letter.is-selected{width:104px!important;height:104px!important}
  .brand-letter.is-selected span{font-size:52px!important}
}


/* 2026-09-09 / active circle overlaps the first inactive module */
.brand-letters{
  grid-template-columns:clamp(205px,21vw,330px) repeat(4,minmax(96px,1fr))!important;
  gap:clamp(10px,1.05vw,16px)!important;
  padding-left:clamp(18px,2vw,30px)!important;
}
.brand-letter.is-selected{
  position:relative!important;
  z-index:5!important;
  width:clamp(218px,22vw,350px)!important;
  height:clamp(218px,22vw,350px)!important;
  margin-right:clamp(-58px,-3.2vw,-34px)!important;
  transform:translateX(-4px)!important;
}
.brand-letter:not(.is-selected){
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
}
.brand-letter:not(.is-selected) span{
  transform:translateY(10%) translateX(-.04em)!important;
  opacity:.92!important;
}
@media(max-width:1050px){
  .brand-letters{grid-template-columns:clamp(150px,27vw,215px) repeat(4,minmax(66px,1fr))!important;gap:9px!important}
  .brand-letter.is-selected{width:clamp(160px,29vw,226px)!important;height:clamp(160px,29vw,226px)!important;margin-right:clamp(-40px,-5vw,-22px)!important}
}
@media(max-width:850px){
  .brand-letters{grid-template-columns:clamp(120px,34vw,158px) repeat(4,minmax(40px,1fr))!important;gap:6px!important;padding-left:9px!important}
  .brand-letter{height:clamp(96px,29vw,126px)!important}
  .brand-letter.is-selected{width:clamp(128px,36vw,166px)!important;height:clamp(128px,36vw,166px)!important;margin-right:clamp(-28px,-7vw,-16px)!important;transform:translateX(-3px)!important}
  .brand-letter:not(.is-selected) span{transform:translateY(13%) translateX(-.04em)!important}
}
@media(max-width:390px){
  .brand-letters{grid-template-columns:112px repeat(4,minmax(36px,1fr))!important;gap:5px!important}
  .brand-letter.is-selected{width:122px!important;height:122px!important;margin-right:-20px!important}
}


/* 2026-09-09 / remove outer frame from CRUDO letter selector */
.brand-letters{
  border:0!important;
  background:transparent!important;
  border-radius:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  box-shadow:none!important;
}


/* 2026-09-09 / continuous CRUDO capsule selector with moving circular cut */
.brand-letters{
  --selected-index:0;
  position:relative!important;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  gap:0!important;
  min-height:clamp(106px,9vw,148px)!important;
  height:clamp(106px,9vw,148px)!important;
  padding:0!important;
  border:2px solid #171718!important;
  border-radius:999px!important;
  background:#f4f4f5!important;
  overflow:visible!important;
  box-shadow:none!important;
  isolation:isolate!important;
}
.brand-letters::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  top:50%!important;
  left:calc((100% / 5) * var(--selected-index) + (100% / 10))!important;
  width:clamp(92px,8.7vw,138px)!important;
  height:clamp(92px,8.7vw,138px)!important;
  border:2px solid #171718!important;
  border-radius:50%!important;
  background:#171718!important;
  transform:translate(-50%,-50%)!important;
  transition:left .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1)!important;
}
.brand-letters::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:50%!important;
  left:calc((100% / 5) * var(--selected-index) + (100% / 10))!important;
  width:clamp(112px,10.4vw,166px)!important;
  height:calc(100% + 8px)!important;
  background:#efeff1!important;
  border-left:2px solid #171718!important;
  border-right:2px solid #171718!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  transition:left .72s cubic-bezier(.16,1,.3,1)!important;
  pointer-events:none!important;
}
.brand-letter,.brand-letter.is-selected{
  position:relative!important;
  z-index:2!important;
  grid-column:auto!important;
  width:auto!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#111!important;
  box-shadow:none!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  transition:color .38s ease!important;
}
.brand-letter span,.brand-letter.is-selected span{
  font-size:clamp(46px,4.6vw,76px)!important;
  font-weight:450!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  transform:none!important;
  color:currentColor!important;
}
.brand-letter.is-selected{color:#fff!important}
.brand-letter:hover:not(.is-selected),.brand-letter:focus-visible:not(.is-selected){color:#555!important;background:transparent!important;transform:none!important;outline:none!important}
.brand-letters:has(.brand-letter:nth-child(1).is-selected){--selected-index:0}.brand-letters:has(.brand-letter:nth-child(2).is-selected){--selected-index:1}.brand-letters:has(.brand-letter:nth-child(3).is-selected){--selected-index:2}.brand-letters:has(.brand-letter:nth-child(4).is-selected){--selected-index:3}.brand-letters:has(.brand-letter:nth-child(5).is-selected){--selected-index:4}
@media(max-width:850px){.brand-letters{height:92px!important;min-height:92px!important;border-width:1.5px!important}.brand-letters::before{width:84px!important;height:84px!important;border-width:1.5px!important}.brand-letters::after{width:100px!important;border-width:1.5px!important}.brand-letter span,.brand-letter.is-selected span{font-size:40px!important}}
@media(max-width:390px){.brand-letters{height:80px!important;min-height:80px!important}.brand-letters::before{width:72px!important;height:72px!important}.brand-letters::after{width:86px!important}.brand-letter span,.brand-letter.is-selected span{font-size:34px!important}}


/* 2026-09-09 / Apple-like smooth segmented track */
.brand-letters{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(17,17,18,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 22px 58px rgba(24,24,26,.055)!important;
  backdrop-filter:blur(18px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(120%)!important;
}
.brand-letters::before{
  border:1px solid rgba(0,0,0,.78)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;
  transition:left 820ms cubic-bezier(.2,.8,.2,1),transform 820ms cubic-bezier(.2,.8,.2,1),box-shadow 420ms ease!important;
}
.brand-letters::after{
  border-left:1px solid rgba(17,17,18,.20)!important;
  border-right:1px solid rgba(17,17,18,.20)!important;
  background:linear-gradient(90deg,rgba(239,239,241,0),rgba(239,239,241,.92) 22%,rgba(239,239,241,.92) 78%,rgba(239,239,241,0))!important;
  transition:left 820ms cubic-bezier(.2,.8,.2,1),opacity 420ms ease!important;
  opacity:.96!important;
}
.brand-letter{
  -webkit-tap-highlight-color:transparent!important;
  touch-action:manipulation!important;
}
.brand-letter span,.brand-letter.is-selected span{
  transition:color 360ms ease,transform 820ms cubic-bezier(.2,.8,.2,1),opacity 360ms ease!important;
}
.brand-letter:active span{transform:scale(.94)!important}
.brand-letter.is-selected:active span{transform:scale(.98)!important}
.brand-letter:hover:not(.is-selected) span,.brand-letter:focus-visible:not(.is-selected) span{transform:scale(1.035)!important;color:#52535a!important}
.brand-letter.is-selected span{transform:scale(1.02)!important}
@media(max-width:850px){
  .brand-letters{box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 16px 38px rgba(24,24,26,.05)!important}
  .brand-letters::before,.brand-letters::after{transition:left 760ms cubic-bezier(.2,.8,.2,1),transform 760ms cubic-bezier(.2,.8,.2,1)!important}
}