/* Project case studies: step-by-step timeline, quick answers, read-next links */
#coastal-redesign .csx{padding:72px 0;background:#fff}
#coastal-redesign .csx .container{max-width:1080px;margin:0 auto;padding:0 20px}
#coastal-redesign .csx-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
#coastal-redesign .csx-eye{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a6234;margin:0 0 10px}
#coastal-redesign .csx h2{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;color:#0f2d59;margin:0 0 26px;text-align:left}
#coastal-redesign .csx-steps{list-style:none;margin:0;padding:0;position:relative}
#coastal-redesign .csx-steps::before{content:"";position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:linear-gradient(#c39a68,#efe3d1)}
#coastal-redesign .csx-step{position:relative;padding:0 0 26px 56px;opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
#coastal-redesign .csx-step:last-child{padding-bottom:0}
#coastal-redesign .csx-js .csx-step{opacity:0;transform:translateY(14px)}
#coastal-redesign .csx-js .csx-step.in{opacity:1;transform:none}
#coastal-redesign .csx-step .n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;background:#0f2d59;color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff}
#coastal-redesign .csx-step b{display:block;font-size:1.04rem;color:#141d2b;margin:5px 0 4px}
#coastal-redesign .csx-step p{margin:0;color:#535c6a;font-size:.97rem;line-height:1.65}
#coastal-redesign .csx-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
#coastal-redesign .csx-box{background:#f8f4ed;border:1px solid #e6ddd0;border-radius:16px;padding:24px}
#coastal-redesign .csx-box h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:1.25rem;color:#0f2d59;margin:0 0 12px}
#coastal-redesign .csx-q{border-top:1px solid #e6ddd0}
#coastal-redesign .csx-q:first-of-type{border-top:0}
#coastal-redesign .csx-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;font-weight:700;color:#141d2b;font-size:.97rem}
#coastal-redesign .csx-q summary::-webkit-details-marker{display:none}
#coastal-redesign .csx-q summary::after{content:"+";flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1.5px solid #d8c7ad;color:#8a6234;display:flex;align-items:center;justify-content:center;font-weight:700;transition:transform .2s}
#coastal-redesign .csx-q[open] summary::after{transform:rotate(45deg)}
#coastal-redesign .csx-q p{margin:0 0 14px;color:#535c6a;line-height:1.65;font-size:.95rem}
#coastal-redesign .csx-reads{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#coastal-redesign .csx-reads a{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border:1px solid #e6ddd0;border-radius:12px;padding:12px 14px;color:#0f2d59;font-weight:700;text-decoration:none;font-size:.95rem;transition:border-color .15s}
#coastal-redesign .csx-reads a:hover{border-color:#c39a68}
#coastal-redesign .csx-reads a::after{content:"\2192";color:#8a6234}
@media(max-width:900px){#coastal-redesign .csx{padding:56px 0}#coastal-redesign .csx-grid{grid-template-columns:1fr;gap:36px}#coastal-redesign .csx-side{position:static}}
@media(prefers-reduced-motion:reduce){#coastal-redesign .csx-js .csx-step{opacity:1;transform:none;transition:none}}