/* Case studies use the same restrained surfaces and cyan accent as the rest of the site. */
.csx { padding: clamp(68px,8vw,108px) 0; background:#fff; border-bottom:1px solid var(--line); }
.csx-inner { max-width: 1120px; }
.csx-head { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:16px 24px; margin-bottom:28px; }
.csx-head .eyebrow { margin:0 0 8px; color:var(--muted); font-size:17px; font-weight:400; letter-spacing:-.01em; }
.csx-head h2 { margin:0; font-size:clamp(34px,4vw,52px); letter-spacing:-.035em; }
.csx-contact,.csx-more { color:var(--blue-dark); font-size:15px; font-weight:600; text-decoration:none; }
.csx-contact:hover,.csx-more:hover { text-decoration:underline; text-underline-offset:4px; }
.csx-contact:focus-visible,.csx-more:focus-visible { outline:3px solid #007995; outline-offset:4px; border-radius:4px; }

.csx-tabs { display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0 0 18px; padding:6px; border-radius:22px; background:var(--soft); }
.csx.is-enhanced .csx-tabs { display:grid; }
.csx-tabs button { position:relative; min-height:74px; padding:13px 18px 16px; overflow:hidden; border:0; border-radius:17px; background:transparent; box-shadow:none; color:var(--muted); font:inherit; font-size:15px; font-weight:600; text-align:left; cursor:pointer; transition:background-color .22s ease,box-shadow .22s ease,color .22s ease; }
.csx-tabs button::before { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.04em; }
.csx-tabs button:nth-child(1)::before { content:'01 / REAL ESTATE'; }
.csx-tabs button:nth-child(2)::before { content:'02 / ADVISORY'; }
.csx-tabs button:nth-child(3)::before { content:'03 / CAMPAIGN'; }
.csx-tabs button::after { content:''; position:absolute; inset:auto 18px 0; height:3px; border-radius:3px 3px 0 0; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.csx-tabs button[aria-selected="true"] { background-color:#fff; background-image:linear-gradient(var(--line),var(--line)); background-repeat:no-repeat; background-position:center bottom; background-size:calc(100% - 36px) 3px; color:var(--ink); box-shadow:0 2px 9px rgba(29,29,31,.06); }
.csx-tabs button[aria-selected="true"]::after { animation:csx-progress var(--csx-duration, 7500ms) linear forwards; }
.csx.is-paused .csx-tabs button[aria-selected="true"]::after { animation-play-state:paused; }
@keyframes csx-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.csx-tabs button:hover:not([aria-selected="true"]) { background:rgba(255,255,255,.55); color:var(--ink); }
.csx-tabs button:focus-visible,.csx-nav button:focus-visible { outline:3px solid #007995; outline-offset:3px; }

.csx-stage { display:grid; isolation:isolate; }
.csx:not(.is-enhanced) .csx-stage { display:block; }
.csx-case { grid-area:1/1; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:0 10px 28px rgba(29,29,31,.045); }
.csx-case + .csx-case { margin-top:18px; }
.csx.is-enhanced .csx-case + .csx-case { margin-top:0; }
.csx-case[hidden] { display:none; }
.csx-case.is-entering { z-index:2; }
.csx-copy,.csx-data { min-width:0; padding:clamp(26px,3.5vw,42px); }
.csx-copy { display:flex; flex-direction:column; background:#fff; }
.csx-brand { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.csx-logo,.csx-monogram { display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; border-radius:17px; }
.csx-logo { background:var(--soft); }
.csx-logo img { display:block; max-width:49px; max-height:49px; width:auto; height:auto; object-fit:contain; }
.csx-logo-wide img { max-width:53px; }
.csx-monogram { background:var(--soft); color:var(--blue-dark); font-size:19px; font-weight:700; }
.csx-name { color:var(--ink); font-size:clamp(18px,2vw,22px); font-weight:700; line-height:1.2; }
.csx-copy .csx-role { margin:0 0 10px; color:var(--muted); font-size:13px; font-weight:600; }
.csx-copy h3 { margin:0 0 17px; color:var(--ink); font-size:clamp(27px,2.8vw,36px); line-height:1.13; letter-spacing:-.03em; }
.csx-copy > p:not(.csx-role) { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.csx-more { align-self:flex-start; margin-top:auto; padding-top:28px; }

.csx-data { display:flex; flex-direction:column; border-left:1px solid var(--line); background:var(--soft); color:var(--ink); }
.csx-data-label { margin:0 0 6px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none; }
.csx-data h4 { margin:0 0 16px; color:var(--ink); font-size:clamp(20px,2vw,24px); line-height:1.2; }
.csx-data h5 { margin:22px 0 12px; color:var(--ink); font-size:14px; line-height:1.25; }
.csx-chart { margin:0; padding:0 0 20px; border-bottom:1px solid var(--line); }
.csx-chart figcaption { margin-bottom:18px; color:var(--muted); font-size:12px; font-weight:600; }
.csx-chart-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; margin:0; padding:0; list-style:none; }
.csx-chart-steps li { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding-top:25px; }
.csx-chart-steps li::before { content:''; position:absolute; top:12px; left:0; right:-11px; height:2px; background:var(--line); }
.csx-chart-steps li:last-child::before { right:0; }
.csx-chart-node { position:absolute; top:4px; left:0; display:grid; place-items:center; width:18px; height:18px; border:3px solid var(--blue); border-radius:50%; background:#fff; color:transparent; font-size:0; }
.csx-chart-steps li:last-child .csx-chart-node { background:var(--blue); }
.csx-chart-steps strong { color:var(--ink); font-size:13px; line-height:1.2; }
.csx-chart-steps li > span:last-child { color:var(--muted); font-size:11px; line-height:1.3; }
.csx-finds { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.csx-finds li { position:relative; padding-left:20px; color:var(--muted); font-size:14px; line-height:1.45; }
.csx-finds li::before { content:'•'; position:absolute; left:1px; color:var(--blue-dark); font-size:19px; line-height:.9; }
.csx-chips { display:flex; flex-wrap:wrap; gap:8px; margin:auto 0 0; padding:22px 0 0; list-style:none; }
.csx-chips li { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:12px; }

.csx-nav { display:none; align-items:center; justify-content:space-between; gap:16px; padding-top:19px; }
.csx.is-enhanced .csx-nav { display:flex; }
.csx-count { margin:0; color:var(--muted); font-size:13px; font-weight:650; }
.csx-count strong { color:var(--ink); font-size:18px; }
.csx-state { margin-left:12px; color:#007995; font-size:12px; font-weight:700; }
.csx-state::before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#00caff; vertical-align:2px; }
.csx.is-paused .csx-state::before { background:#aab8be; }
.csx-nav-actions { display:flex; gap:8px; }
.csx-nav button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--ink); font:inherit; font-size:20px; cursor:pointer; transition:background-color .2s ease,border-color .2s ease,transform .2s ease; }
.csx-nav button:hover { transform:translateY(-2px); border-color:var(--blue); background:var(--soft); }

@media (max-width:860px) { .csx-case { grid-template-columns:1fr; } .csx-data { border-left:0; border-top:1px solid var(--line); } .csx-copy,.csx-data { padding:30px; } .csx-more { margin-top:0; } }
@media (max-width:600px) { .csx-tabs { grid-auto-columns:minmax(180px,72%); grid-auto-flow:column; grid-template-columns:none; overflow-x:auto; padding:6px; scroll-snap-type:x mandatory; scrollbar-width:thin; } .csx-tabs button { min-height:70px; scroll-snap-align:start; } .csx-case { border-radius:24px; } .csx-copy,.csx-data { padding:25px; } .csx-brand { margin-bottom:23px; } .csx-chart-steps { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .csx-tabs button,.csx-tabs button::after,.csx-nav button { transition:none; } .csx-tabs button[aria-selected="true"]::after { animation:none; transform:scaleX(1); } }
@media (prefers-contrast:more) { .csx-case,.csx-tabs button,.csx-nav button { border-color:currentColor; box-shadow:none; } }