.sof-portfolio{--sof-navy:#0c1c34;--sof-blue:#2168e5;--sof-ink:#17253b;--sof-muted:#63748e;--sof-line:#dfe7f2;color:var(--sof-ink);font-family:inherit;line-height:1.65}.sof-portfolio *{box-sizing:border-box}.sof-portfolio img{display:block;max-width:100%;height:auto}.sof-portfolio h1,.sof-portfolio h2,.sof-portfolio h3{color:var(--sof-navy);letter-spacing:-.035em;line-height:1.19}.sof-portfolio a{text-decoration:none}.sof-inner,.sof-catalog{max-width:1260px;margin:0 auto;padding:30px clamp(18px,4vw,58px) 90px}.sof-catalog-head{border-radius:24px;padding:clamp(32px,6vw,76px);margin-bottom:34px;background:linear-gradient(125deg,#0c1c34,#173d77);color:white;box-shadow:0 24px 50px #0c1c341c}.sof-catalog-head h1{color:white;font-size:clamp(36px,5vw,64px);margin:15px 0}.sof-catalog-head p{color:#cfdbed;font-size:clamp(16px,2vw,20px);max-width:680px}.sof-eyebrow{display:block;color:#4788fb;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800}.sof-catalog-head .sof-eyebrow{color:#91c0ff}.sof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:26px}.sof-project-card{overflow:hidden;border:1px solid var(--sof-line);border-radius:20px;background:#fff;box-shadow:0 14px 36px #1a38520d;transition:transform .2s,box-shadow .2s}.sof-project-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px #1a385526}.sof-card-image{display:block;background:#eaf1fb;aspect-ratio:16/10;overflow:hidden}.sof-card-image img{width:100%;height:100%;object-fit:cover}.sof-card-placeholder{display:grid;place-items:center;height:100%;font-weight:800;font-size:48px;color:#7894b8}.sof-card-content{padding:25px}.sof-tag{display:inline-block;color:#235ba4;background:#eaf2fd;padding:5px 11px;border-radius:20px;font-size:12px;font-weight:800;margin-bottom:12px}.sof-card-content h2{font-size:25px;margin:0 0 10px}.sof-card-content h2 a{color:var(--sof-navy)}.sof-card-content p{min-height:58px;color:var(--sof-muted);margin:0 0 17px}.sof-link{color:#1765dd;font-weight:800}.sof-back{display:inline-block;margin:10px 0 30px;color:#426383;font-size:14px;font-weight:700}.sof-hero{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(26px,4vw,65px);align-items:center;padding:35px 0 70px}.sof-hero h1{font-size:clamp(44px,5.8vw,79px);margin:16px 0}.sof-hero .sof-lead{font-size:clamp(20px,2vw,25px);line-height:1.4;color:#24466e;font-weight:700}.sof-hero-text>p:not(.sof-lead){color:var(--sof-muted)}.sof-hero-image{border:1px solid var(--sof-line);padding:10px;border-radius:25px;background:white;box-shadow:0 30px 60px #152d5622;overflow:hidden}.sof-hero-image img{width:100%;border-radius:16px}.sof-primary-link{display:inline-flex;padding:13px 21px;color:white!important;background:var(--sof-blue);font-weight:800;border-radius:10px;margin-top:20px}.sof-intro{border-radius:20px;background:#f1f5fa;padding:clamp(25px,4vw,45px);margin:0 0 80px}.sof-intro h2{font-size:32px;margin:0 0 13px}.sof-intro p{margin:0;color:#4a5f79}.sof-section-heading{max-width:720px;margin:0 0 60px}.sof-section-heading h2{font-size:clamp(32px,4vw,49px);margin:11px 0}.sof-section-heading p{color:var(--sof-muted);font-size:17px}.sof-feature{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,5vw,72px);align-items:center;padding:55px 0;border-top:1px solid var(--sof-line)}.sof-feature-reverse{grid-template-columns:1.25fr .75fr}.sof-feature-reverse .sof-feature-copy{order:2}.sof-feature-reverse .sof-feature-image{order:1}.sof-index{display:inline-block;color:var(--sof-blue);font-size:13px;font-weight:900;letter-spacing:.14em;margin-bottom:14px}.sof-feature h3{font-size:clamp(24px,2.7vw,37px);margin:0 0 18px}.sof-feature-copy p{font-size:16px;line-height:1.85;color:#5a6d83}.sof-feature-image{position:relative;cursor:zoom-in;display:block;width:100%;padding:10px;border-radius:18px;border:1px solid var(--sof-line);background:white;box-shadow:0 20px 45px #14274817}.sof-feature-image img{width:100%;height:auto;border-radius:10px}.sof-zoom{position:absolute;right:20px;bottom:18px;padding:8px 11px;background:#0d2442e6;color:white;border-radius:8px;font-size:12px;font-weight:700}.sof-conclusion{background:linear-gradient(135deg,#0c1c34,#153f7d);color:#e5edf9;border-radius:26px;padding:clamp(32px,5vw,65px);margin-top:45px}.sof-conclusion h2{color:white;font-size:clamp(27px,4vw,44px);margin:16px 0}.sof-conclusion>p{max-width:820px}.sof-credit{border-top:1px solid #ffffff35;padding-top:22px;margin-top:30px;font-size:14px}.sof-credit span{padding:0 9px}.sof-demo-note{font-size:12px;color:#b3c3d9;margin-top:20px}.sof-lightbox[hidden]{display:none!important}.sof-lightbox{position:fixed;inset:0;z-index:999999;background:#071323ed;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5vh 4vw;color:white}.sof-lightbox img{max-height:82vh;max-width:92vw;object-fit:contain;border-radius:5px}.sof-lightbox p{margin:10px 0;color:#e7f0ff}.sof-lightbox-close{position:absolute;top:16px;right:25px;background:#ffffff1f;color:white;border:0;border-radius:50%;width:48px;height:48px;font-size:32px;cursor:pointer}.sof-no-scroll{overflow:hidden}@media(max-width:820px){.sof-hero,.sof-feature,.sof-feature-reverse{grid-template-columns:1fr}.sof-feature-reverse .sof-feature-copy,.sof-feature-reverse .sof-feature-image{order:initial}.sof-feature{padding:35px 0}.sof-hero{padding-bottom:45px}.sof-inner,.sof-catalog{padding-inline:18px}.sof-credit span{display:none}.sof-credit strong{display:inline-block}}

/* v1.1.0: independent full-width presentation within narrow WordPress themes */
.sof-portfolio.sof-breakout{width:min(1480px,calc(100vw - 44px))!important;max-width:none!important;position:relative!important;left:50%!important;transform:translateX(-50%)!important;margin-left:0!important;margin-right:0!important;clear:both;float:none!important}
.sof-portfolio.sof-breakout.sof-catalog{padding:28px 12px 95px!important}
.sof-portfolio .sof-inner{max-width:1440px!important;width:100%;padding-inline:clamp(20px,3vw,48px)!important}
.sof-portfolio .sof-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px}
.sof-portfolio .sof-card-image{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eaf3fc,#f9fbff);padding:12px}
.sof-portfolio .sof-card-image img{object-fit:contain!important;width:100%;height:100%;object-position:center}
.sof-portfolio .sof-project-card{display:flex;flex-direction:column}
.sof-portfolio .sof-card-content{flex:1;display:flex;flex-direction:column}
.sof-portfolio .sof-card-content .sof-link{margin-top:auto}
.sof-portfolio .sof-catalog-head{margin-bottom:36px;padding:clamp(35px,5vw,72px)}
.sof-portfolio .sof-catalog-note{color:#61748b;font-size:14px;margin:24px 4px}
.sof-portfolio .sof-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);padding:45px 0 74px}
.sof-portfolio .sof-hero-image img{object-fit:contain}
.sof-portfolio .sof-intro{display:grid;grid-template-columns:.62fr 1fr;gap:35px;align-items:center;margin-bottom:74px}
.sof-portfolio .sof-section-heading{max-width:900px;margin-bottom:24px}
.sof-portfolio .sof-toc{background:#f1f6fc;border:1px solid #dce7f6;border-radius:19px;padding:24px 26px;margin:25px 0 55px}
.sof-portfolio .sof-toc>strong{font-size:18px;color:#153257;display:block;margin-bottom:14px}
.sof-portfolio .sof-toc>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sof-portfolio .sof-toc a{display:flex;justify-content:space-between;gap:10px;align-items:center;background:white;border:1px solid #dfe8f6;border-radius:10px;padding:13px 15px;color:#174474;font-weight:700;font-size:14px}
.sof-portfolio .sof-toc a:hover{border-color:#7ba9e7;background:#f7fbff}
.sof-portfolio .sof-group-head{padding:36px 0 14px;scroll-margin-top:40px;border-top:2px solid #d7e4f5;margin-top:35px}
.sof-portfolio .sof-group-head h3{font-size:clamp(27px,3vw,42px);margin:8px 0 10px}
.sof-portfolio .sof-group-head p{font-size:17px;color:#61748b;max-width:920px;margin:0}
.sof-portfolio .sof-feature{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,4vw,64px);padding:42px 0}
.sof-portfolio .sof-feature-reverse{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.sof-portfolio .sof-feature h3{font-size:clamp(24px,2.6vw,36px)}
.sof-portfolio .sof-feature-image{overflow:hidden;padding:13px;border-radius:18px}
.sof-portfolio .sof-feature-image img{width:100%;max-height:650px;object-fit:contain}
.sof-portfolio .sof-value{border-left:3px solid #2474d3;background:#f2f7fe;padding:17px 21px;border-radius:0 12px 12px 0;margin-top:24px}
.sof-portfolio .sof-value strong{color:#1b4c85;font-size:13px}
.sof-portfolio .sof-value p{margin:6px 0 0;font-size:15px;line-height:1.7}
@media(max-width:1050px){.sof-portfolio .sof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sof-portfolio .sof-toc>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.sof-portfolio.sof-breakout{width:calc(100vw - 24px)!important}.sof-portfolio .sof-grid,.sof-portfolio .sof-toc>div{grid-template-columns:1fr}.sof-portfolio .sof-hero,.sof-portfolio .sof-intro,.sof-portfolio .sof-feature,.sof-portfolio .sof-feature-reverse{grid-template-columns:1fr}.sof-portfolio .sof-feature-reverse .sof-feature-copy,.sof-portfolio .sof-feature-reverse .sof-feature-image{order:initial}.sof-portfolio .sof-inner{padding-inline:12px!important}.sof-portfolio .sof-feature{padding:28px 0}.sof-portfolio .sof-group-head{padding-top:27px}.sof-portfolio .sof-toc{padding:18px}}

/* v1.2.0 — Hide only theme-generated site/header titles on portfolio routes.
   The portfolio's own headings, breadcrumb, and accessible document title remain intact. */
body.sof-portfolio-route .site-header,
body.sof-portfolio-route #site-header,
body.sof-portfolio-route header#masthead,
body.sof-portfolio-route .site-branding,
body.sof-portfolio-route .site-title,
body.sof-portfolio-route .site-description,
body.sof-portfolio-route .entry-header,
body.sof-portfolio-route .page-header,
body.sof-portfolio-route .elementor-page-title,
body.sof-portfolio-route h1.entry-title,
body.sof-portfolio-route h1.page-title,
body.sof-portfolio-route .wp-block-post-title {display:none!important}
/* WordPress admin toolbar remains visible to logged-in editors. */
body.sof-portfolio-route .site-main,
body.sof-portfolio-route #content,
body.sof-portfolio-route .site-content{padding-top:0!important;margin-top:0!important}
body.sof-portfolio-route .site-main > article,
body.sof-portfolio-route .site-main > .page,
body.sof-portfolio-route .site-main > .sof_application,
body.sof-portfolio-route .entry-content,
body.sof-portfolio-route .page-content{margin-top:0!important;padding-top:0!important}
body.sof-portfolio-route .sof-portfolio.sof-breakout{margin-top:0!important}
body.sof-portfolio-route .sof-portfolio .sof-back{margin-top:0;margin-bottom:24px}
body.sof-portfolio-route .sof-portfolio .sof-hero{padding-top:14px}

/* v1.2.1: modal appended to body to escape transformed portfolio containers. */
body > .sof-lightbox[hidden]{display:none!important}
body > .sof-lightbox{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:2147483000!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;background:rgba(7,19,35,.95)!important;padding:72px 32px 30px!important;overflow:auto}
body > .sof-lightbox img{display:block!important;width:auto!important;height:auto!important;max-width:calc(100vw - 64px)!important;max-height:calc(100dvh - 170px)!important;object-fit:contain!important;opacity:1!important;visibility:visible!important;position:static!important;transform:none!important;box-shadow:0 16px 60px #0008}
body > .sof-lightbox p{color:#fff!important;text-align:center;margin:12px 0 0!important;font-size:15px}
body > .sof-lightbox .sof-lightbox-close{position:fixed!important;right:24px!important;top:52px!important;z-index:2!important;background:#cf286b!important;color:white!important}
body > .sof-lightbox .sof-lightbox-status{font-size:14px;color:#dae8ff;text-align:center}
@media(max-width:650px){body > .sof-lightbox{padding:65px 12px 18px!important}body > .sof-lightbox img{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 145px)!important}body > .sof-lightbox .sof-lightbox-close{top:38px!important;right:12px!important}}
