/* Portfolio editorial blocks. The CMS continues to render navigation and CTA models. */
.site-page__main:has(.sdx-portfolio){max-width:var(--sdx-site-content-max,90rem);margin-inline:auto}
/* The legacy CTA rule paints every direct div; the library model owns the background. */
.site-page__main:has(.sdx-portfolio) .site-cta>div{background:transparent}
.sdx-portfolio{--portfolio-ink:#0a3441;--portfolio-muted:#496773;--portfolio-line:#b9d3d8;--portfolio-accent:#287d83;color:var(--portfolio-ink);font-size:1rem}
.sdx-portfolio *{box-sizing:border-box}
.sdx-portfolio h1,.sdx-portfolio h2,.sdx-portfolio h3{color:inherit;max-width:none;letter-spacing:-.035em;text-wrap:balance}
.sdx-portfolio h2{font-size:clamp(1.65rem,2.7vw,2.6rem);line-height:1.15;margin:0}
.sdx-portfolio p{max-width:none;line-height:1.8;margin:0}
.sdx-portfolio a{text-underline-offset:.25em}
.sdx-portfolio a:focus-visible{outline:3px solid #299da7;outline-offset:6px;border-radius:4px}
.sdx-portfolio .sdx-portfolio__eyebrow{display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem;font-size:.73rem;font-weight:800;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--portfolio-accent)}
.sdx-portfolio__eyebrow:before{content:"";width:1.8rem;height:2px;background:currentColor;flex:none}
.sdx-portfolio__header-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,4vw,4rem);color:#eefafa}
.page-header:has(.sdx-portfolio__header-content) .page-header__copy{max-width:none}
.page-header:has(.sdx-portfolio__header-content) .page-header__depth{display:none}
.sdx-portfolio__header-content .page-header__intro{max-width:none}
.site-page__main>.page-block:first-child>.sdx-portfolio__body{padding-top:0}
.sdx-portfolio__index{display:grid;align-content:center}
.sdx-portfolio__index a{display:grid;grid-template-columns:1.8rem minmax(0,1fr) 1rem;gap:1rem;align-items:center;padding:1.6rem .2rem;border-top:1px solid #90c6cd40;color:#eefafa;text-decoration:none;transition:color .2s,padding .2s}
.sdx-portfolio__index a:last-child{border-bottom:1px solid #90c6cd40}
.sdx-portfolio__index a span{font-size:.75rem;font-variant-numeric:tabular-nums;color:#8fc7cc}
.sdx-portfolio__index a strong{font-size:1.05rem;line-height:1.45;font-weight:600}
.sdx-portfolio__index a:hover{color:#95e1da;padding-left:.65rem}
.sdx-portfolio__body{display:grid;gap:clamp(2.5rem,5vw,4.5rem);padding-block:clamp(1.2rem,2.5vw,2rem)}
.sdx-portfolio__collection{scroll-margin-top:8rem}
.sdx-portfolio__section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1.8rem}
.sdx-portfolio__section-heading>p{flex:0 1 35%;color:var(--portfolio-muted)}
.sdx-portfolio__section-heading>a{flex:none;font-size:.9rem;font-weight:700;color:var(--portfolio-ink)}
.sdx-portfolio__projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.sdx-portfolio__project{min-width:0;display:flex;flex-direction:column;border:1px solid var(--portfolio-line);border-radius:1.3rem;background:#fff;overflow:hidden;box-shadow:0 1rem 2rem #08394508;transition:border-color .2s,box-shadow .2s}
.sdx-portfolio__project:hover{border-color:#42838b;box-shadow:0 1.2rem 2.5rem #08394512}
.sdx-portfolio__project-visual{padding:clamp(1rem,2.4vw,2.3rem) clamp(1rem,2.4vw,2.3rem) 0;background:linear-gradient(145deg,#dceef0,#edf5f6);border-bottom:1px solid var(--portfolio-line);overflow:hidden}
.sdx-portfolio__screen{overflow:hidden;border:1px solid #5e89943b;border-radius:.7rem .7rem 0 0;background:#f6fbfc;box-shadow:0 1rem 2.5rem #08394524}
.sdx-portfolio__screen-bar{display:flex;align-items:center;gap:.3rem;position:relative;padding:.65rem .75rem;background:#f7fbfc;border-bottom:1px solid #d9e6e9}
.sdx-portfolio__screen-bar>span{width:.35rem;height:.35rem;border-radius:50%;background:#9bb8bf;flex:none}
.sdx-portfolio__screen-bar>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:auto;padding-right:1.6rem;color:#506c76;font-size:.65rem;line-height:1.3}
.sdx-portfolio__screen img{display:block;width:100%;height:auto;object-fit:contain;object-position:top}
.sdx-portfolio__project--standard .sdx-portfolio__project-visual{display:flex;align-items:center;aspect-ratio:4/3;padding-bottom:clamp(1rem,2.4vw,2.3rem)}
.sdx-portfolio__project--standard .sdx-portfolio__screen{width:100%;border-radius:.7rem}
.sdx-portfolio__project-copy{display:flex;align-items:flex-start;flex-direction:column;flex:1;padding:clamp(1.25rem,2.8vw,2.5rem);gap:1rem}
.sdx-portfolio__project-copy .sdx-portfolio__eyebrow{margin:0;font-size:.66rem}
.sdx-portfolio__project h3{font-size:clamp(1.55rem,2.3vw,2.2rem);line-height:1.12;margin:0}
.sdx-portfolio__project-copy>p:not(.sdx-portfolio__eyebrow){color:var(--portfolio-muted)}
.sdx-portfolio__project-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding-top:1.2rem;margin-top:auto;border-top:1px solid var(--portfolio-line);color:var(--portfolio-ink);font-size:.9rem;font-weight:750;text-decoration:none}
.sdx-portfolio__project-link i{display:grid;place-items:center;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;background:#e4f2f3;transition:background .2s,color .2s}
.sdx-portfolio__project-link:hover i{background:#0b5968;color:#fff}
.sdx-portfolio__project--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.sdx-portfolio__project--featured .sdx-portfolio__project-visual{display:flex;align-items:center;padding:clamp(1.2rem,3vw,3rem);border-bottom:0;border-right:1px solid var(--portfolio-line)}
.sdx-portfolio__project--featured .sdx-portfolio__screen{width:100%;border-radius:.7rem}
.sdx-portfolio__project--featured .sdx-portfolio__project-copy{justify-content:center}
.sdx-portfolio__tags{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:.2rem 0 1rem;list-style:none}
.sdx-portfolio__tags li{padding:.4rem .7rem;border:1px solid var(--portfolio-line);border-radius:.4rem;background:#f0f7f8;color:var(--portfolio-muted);font-size:.74rem;line-height:1.4}
.sdx-portfolio__back{display:inline-flex;align-items:center;gap:.65rem;margin-top:1.7rem;font-size:.85rem;font-weight:600;color:#c3e8e8}
.sdx-portfolio__back:hover{color:#fff}
.sdx-portfolio__hero-visual{margin:0;min-width:0}
.sdx-portfolio__hero-visual .sdx-portfolio__screen{border-radius:.7rem;border-color:#6c949e}
.sdx-portfolio__hero-visual img{aspect-ratio:auto;object-fit:contain}
.sdx-portfolio__hero-visual figcaption{padding-top:.9rem;text-align:right;font-size:.75rem;color:#a9cfd6}
.sdx-portfolio__hero-visual figcaption a{color:#c3e8e8}
.sdx-portfolio__hero-visual figcaption i{margin-left:.4rem}
.sdx-portfolio__story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--portfolio-line);border-radius:1.2rem;overflow:hidden}
.sdx-portfolio__story-panel{padding:clamp(1.4rem,3.3vw,3rem);background:#f3f8f9}
.sdx-portfolio__story-panel--role{background:#e5f1f2;border-left:1px solid var(--portfolio-line)}
.sdx-portfolio__step{display:block;margin-bottom:1rem;font-size:.8rem;letter-spacing:.06em;font-weight:700;color:var(--portfolio-accent)}
.sdx-portfolio__story-panel h2{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-bottom:1rem}
.sdx-portfolio__story-panel p{color:var(--portfolio-muted)}
.sdx-portfolio__features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem;list-style:none;padding:0;margin:0}
.sdx-portfolio__features li{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;padding:1.6rem;border:1px solid var(--portfolio-line);border-radius:1rem;background:linear-gradient(145deg,#fff,#f3f9fa);font-size:1.08rem;line-height:1.5;font-weight:600}
.sdx-portfolio__features li>i{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:.7rem;background:#e0f0f1;color:#196472;font-size:1.3rem}
.sdx-portfolio__features li>small{position:absolute;right:1.5rem;top:1.8rem;font-size:.7rem;font-weight:500;color:#597b85}
.sdx-portfolio__outcomes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:stretch}
.sdx-portfolio__result{padding:clamp(1.5rem,3.4vw,3rem);border:1px solid #226373;border-radius:1.2rem;background:radial-gradient(ellipse at 100% 100%,#21707b66,transparent 70%),#0a3441;color:#eefafa}
.sdx-portfolio__result .sdx-portfolio__eyebrow{color:#96dcd6}
.sdx-portfolio__result h2{margin-bottom:1.3rem}
.sdx-portfolio__result>p:last-child{font-size:1.2rem;line-height:1.7;color:#d0e9eb}
.sdx-portfolio__lesson{padding-block:1rem;display:flex;flex-direction:column;justify-content:center;gap:1.3rem}
.sdx-portfolio__lesson h2{font-size:clamp(1.5rem,2.5vw,2.1rem)}
.sdx-portfolio__lesson p{color:var(--portfolio-muted)}
.sdx-portfolio__services{display:flex;flex-wrap:wrap;gap:.6rem}
.sdx-portfolio__services a{display:inline-flex;align-items:center;gap:.8rem;padding:.6rem .85rem;border:1px solid var(--portfolio-line);border-radius:.5rem;color:var(--portfolio-ink);font-size:.8rem;font-weight:700;text-decoration:none}
.sdx-portfolio__services a:hover{background:#e5f1f2}
.sdx-portfolio__project--compact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.sdx-portfolio__project--compact .sdx-portfolio__project-visual{padding:1.1rem;display:flex;align-items:center;border-right:1px solid var(--portfolio-line);border-bottom:0}
.sdx-portfolio__project--compact .sdx-portfolio__screen{border-radius:.45rem;width:100%}
.sdx-portfolio__project--compact .sdx-portfolio__project-copy{padding:1.3rem;gap:.8rem}
.sdx-portfolio__project--compact h3{font-size:1.3rem}
.sdx-portfolio__project--compact .sdx-portfolio__project-copy>p:not(.sdx-portfolio__eyebrow){font-size:.85rem;line-height:1.65}
.sdx-portfolio__project--compact .sdx-portfolio__project-link{font-size:.8rem;padding-top:.7rem}
@media(max-width:1100px){
  .sdx-portfolio__header-content{grid-template-columns:minmax(0,1fr)}
  .sdx-portfolio__project--compact{display:flex}
  .sdx-portfolio__project--compact .sdx-portfolio__project-visual{border-right:0;border-bottom:1px solid var(--portfolio-line);padding:1.5rem 1.5rem 0}
  .sdx-portfolio__project--compact .sdx-portfolio__screen{border-radius:.5rem .5rem 0 0}
}
@media(max-width:767px){
  .sdx-portfolio__story,.sdx-portfolio__outcomes,.sdx-portfolio__project--featured{grid-template-columns:minmax(0,1fr)}
  .sdx-portfolio__index a{padding-block:1rem}
  .sdx-portfolio__section-heading{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.3rem}
  .sdx-portfolio__project--featured .sdx-portfolio__project-visual{border-right:0;border-bottom:1px solid var(--portfolio-line)}
  .sdx-portfolio__story-panel--role{border-left:0;border-top:1px solid var(--portfolio-line)}
  .sdx-portfolio__features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sdx-portfolio__features li{padding:1.15rem;font-size:.96rem}
  .sdx-portfolio__features li>small{right:1.1rem}
}
@media(max-width:575px){
  .sdx-portfolio__projects{grid-template-columns:minmax(0,1fr)}
  .sdx-portfolio__screen-bar{padding:.5rem}
}
@media(max-width:359px){.sdx-portfolio__features{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.sdx-portfolio a,.sdx-portfolio__project,.sdx-portfolio__project-link i{transition:none}}