/* Swap the two requested sections while preserving live-text reading order. */
.experience-copy{grid-column:1;grid-row:1}
.experience-phone{grid-column:2;grid-row:1}
.expansion-intro{grid-column:2;grid-row:1}
.expansion-art{grid-column:1;grid-row:1}

@media(max-width:760px){.experience-copy{grid-column:1;grid-row:1}.experience-phone{grid-column:1;grid-row:2}.expansion-intro{grid-column:1;grid-row:1}.expansion-art{grid-column:1;grid-row:2}}
/* Persistent section navigation, with an opaque reading surface. */
:root{--header-height:88px}
html{scroll-padding-top:calc(var(--header-height) + 24px)}
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e9edf2}
.header-inner{height:var(--header-height);gap:28px;position:relative}
#main-nav{gap:26px;font-size:14px}
#main-nav a{white-space:nowrap;padding-block:10px;text-decoration:none}
#main-nav a[aria-current="location"]{color:#2268b9;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px}
@media(min-width:761px) and (max-width:1100px){
 .header-inner{gap:18px}.brand img{width:120px}#main-nav{gap:16px;font-size:12px}
 .header-inner>.button{font-size:12px;padding:8px 10px;gap:6px}
}
@media(max-width:900px){
 :root{--header-height:76px}
 .header-inner{flex-wrap:nowrap;gap:14px}
 .menu-toggle{display:inline-flex;background:none;border:0;padding:8px;color:var(--navy)}
 .header-inner>.button{margin-inline-start:auto;margin-inline-end:0}
 #main-nav{display:none;position:absolute;top:100%;inset-inline:0;width:100%;margin:0;padding:12px 20px 20px;flex-direction:column;align-items:stretch;gap:0;border:1px solid #e9edf2;border-top:0;background:#fff;box-shadow:0 14px 24px -20px #142b5050;font-size:15px;max-height:calc(100dvh - var(--header-height));overflow:auto}
 #main-nav.is-open{display:flex}
 #main-nav a{padding:11px 0}
}

/* Portraits are bounded by their adjacent biography rather than setting row height. */
.founder-portrait{position:relative;align-self:stretch;min-height:0;margin:0}
.founders .founder-portrait img{position:absolute;inset:0;width:100%;height:100%;max-height:185px;object-fit:cover;object-position:50% 25%}
@media(max-width:1100px){.founders .founder-portrait img{max-height:135px}}
@media(max-width:760px){.founders .founder-portrait img{max-height:130px}}
.founders article{align-self:start}

/* Quiet section boundaries aligned to the content edges. */
#problem,#solution,#experience,#start,#about{position:relative}
#problem::before,#solution::before,#experience::before,#start::before,#about::before{content:"";position:absolute;top:0;inset-inline:0;margin-inline:auto;width:min(1376px,calc(100% - 10.5vw));height:1px;background:#e5eaf1;pointer-events:none}
#solution::before,#start::before{width:100%}
@media(min-width:761px) and (max-width:1180px){#problem::before,#experience::before,#about::before{width:calc(100% - 80px)}}
@media(max-width:760px){#problem::before,#experience::before,#about::before{width:calc(100% - 40px)}}

/* Founders: one fixed frame for both portraits, whatever the length of the bio beside it; Ram's photo is shot wider, so it is enlarged to bring both faces to one scale. */
.founders .founder-portrait{align-self:start;width:145px;height:185px;overflow:hidden;border-radius:8px;background:#eef1f5}
.founders .founder-portrait img{position:static;width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 20%;border-radius:0}
.founders .founder-portrait img[src$="founder-1.png"]{transform:scale(1.32);transform-origin:50% 30%}
@media(max-width:1050px){.founders .founder-portrait{width:100px;height:135px}}
@media(max-width:760px){.founders .founder-portrait{width:95px;height:130px}}

/* The control loop: numbered steps, one line each, and arrows strong enough to read the direction. */
.loop-step{gap:9px;padding-inline:12px}
.loop-step>span{white-space:nowrap}
.loop-n{order:3;flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#e8f1fc;color:#1d5fa8;font-size:12px;font-weight:700;line-height:1;direction:ltr}
.loop-step.closes .loop-n{background:#d7efe2;color:#1e7a4c}
.loop-arrows,.loop-arrows marker path{stroke:#5b93d1;stroke-width:1.8}
.loop-step.treats{font-size:inherit}
@media(max-width:760px){.loop-step{padding-inline:8px;gap:6px}.loop-step>svg{display:none}.loop-step>span{white-space:normal}.loop-n{width:19px;height:19px;font-size:11px}.loop-step.treats{font-size:12px}}
@media(min-width:761px) and (max-width:1150px){.loop-step.treats>svg{display:none}}

/* The demo form, on the navy contact section. */
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;max-width:620px;margin:8px auto 0;text-align:right}
.demo-form .field{display:grid;gap:7px}
.demo-form .field-wide{grid-column:1/-1}
.demo-form label{font-size:14px;font-weight:700;color:#e1e9f4}
.demo-form label span{font-weight:400;color:#b9c7da}
.demo-form input{width:100%;height:50px;padding:0 14px;border:1px solid transparent;border-radius:8px;background:#fff;color:var(--navy);font-size:16px}
.demo-form input:focus{outline:3px solid #8cc2ff;outline-offset:2px}
.demo-form input[aria-invalid=true]{border-color:#ffb4ab;outline:2px solid #ffb4ab;outline-offset:0}
.demo-form .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.form-foot .button:disabled{opacity:.6;cursor:progress;transform:none}
.cta .form-note{font-size:13px;color:#b9c7da;margin:0}
.form-status{min-height:1.7em;font-size:15px;color:#e1e9f4;margin:0}
.form-status.is-ok{color:#a6ecc6}
.form-status.is-err{color:#ffc2bb}
@media(max-width:760px){.demo-form{grid-template-columns:1fr}.form-foot{flex-direction:column;align-items:stretch}.form-foot .button{width:100%}}