/* One page boundary, measured from the current SamePage Private choices section.
   This file owns outer geometry. Chrome remains independent; layouts and reading
   measures vary inside the boundary. Device apertures remain product specific. */
:root{
 --content-max:1440px;
 --content-width:min(var(--content-max),calc(100vw - var(--page-edge) * 2));
 --space-gap:clamp(28px,4vw,56px);--reading-measure:72ch;
 /* Budget includes chapter bar, controls and breathing room, beyond the fixed global header.
    svh prevents a mobile browser toolbar opening from clipping a playing device. */
 --media-room:min(640px,calc(100svh - var(--chrome-height) - 136px));
}
/* Canonical outer containers. Explicit geometry neutralizes inherited route widths. */
html body :is(.ia-lane,.ds-shell,.gate-shell),
html body.v128-canonical-standalone main.wrap.error-page,
html body #pg-home .hx-work>.hx-lane,
html body #pg-work .work-sec.v95-work-root,
html body #pg-resume #resume-page.resume-web,
html body #pg-contact#pg-contact .con-pg,
html body :is(#pg-privacy,#pg-terms) .lg-page,
html body #pg-cs #cs-wrap :is(.cv4-hero-inner,.cv4-body,.cv4-prototype-wrap,.v134-product-nav,.vt-lane,.do67-shell,.vt-next),
html body #pg-cs #cs-wrap .do67-body>.cv4-section[data-module='next']{
 box-sizing:border-box;width:var(--content-width)!important;max-width:var(--content-max)!important;
 margin-inline:auto!important;padding-inline:0!important;min-width:0;
}
/* Nested sections inherit the boundary without subtracting the gutters a second time. */
html body #pg-cs #cs-wrap :is(.cv4-body,.vt-body) :is(.cv4-section,.cv4-prototype-wrap,.vt-next),
html body #pg-contact#pg-contact .con3-shell{
 width:100%!important;max-width:none!important;margin-inline:0!important;padding-inline:0!important;
}
#pg-cs .cv4-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-gap);align-items:center;}
#pg-cs .cv4-hero-copy{max-width:none;}
#pg-cs .cv4-section>p{max-width:var(--reading-measure);}
/* Balance display copy and avoid stranded final words without changing type scale or reading width. */
#pg-cs :is(.cv4-title,.cv4-heading,.cv4-open-row h3,.cv6-knowledge-row h3,.cv6-step-copy h3,.cv4-next-copy h2),.ds-section-head h2{text-wrap:wrap;}
#pg-cs :is(.cv4-hero-intro,.cv4-lead,.cv4-open-row p,.cv4-summary-item p,.cv6-knowledge-row p,.cv6-step-copy p,.cv4-next-copy p),.ia-about p,.resume-web li,.ds-section-head p{text-wrap:pretty;}
#pg-home .ia-home-hero{padding:54px 0 44px;}
#pg-home .ia-home-grid{display:grid;width:100%;max-width:none;padding:0;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-gap);align-items:start;}
#pg-home .ia-practices{border-top:0;}
#pg-home .ia-practice{padding:18px 0;border-top:1px solid var(--ia-line);border-bottom:0;}

#pg-home .hx-work-head{padding-inline:0;}
#pg-home .ia-home-close{padding:48px 0;grid-template-columns:148px minmax(0,1fr) auto;gap:36px;}
#pg-home .ia-home-close img{width:148px;height:172px;}
#pg-work .work-sec.v95-work-root{padding-block:48px 64px;}
#pg-work .v95-work-intro{max-width:960px;}
#pg-work [data-family-grid] .pc-vis{max-height:360px;}

#pg-cs .cv4-body>.cv4-section:first-child{margin-top:0;}
/* Aster boards are reading artifacts, not short clips: keep enough width to inspect token tables.
   Their intentional vertical reading is distinct from the viewport-contained demos below. */
#pg-cs .aster-v46-board{max-width:1040px;margin-inline:auto;}
#pg-cs .aster-v46-board .cv6-browser{width:100%;max-width:1040px;}
#pg-cs .aster-v46-demo{display:grid;grid-template-columns:minmax(220px,.28fr) minmax(0,.72fr);gap:var(--space-gap);}
#pg-cs .cv4-product-grid{grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);gap:var(--space-gap);}
#pg-cs .cv4-product-copy{max-width:48ch;}
#pg-cs .vt-restaurant-grid{grid-template-columns:minmax(0,2.5fr) minmax(260px,1fr);gap:var(--space-gap);}
/* In paired enterprise evidence, the working flow needs more room than its overview reference. */
#pg-cs [data-project="accessscope"] .cv4-product-dominant>.cv6-media-cluster[data-count="2"]{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center;}
@media(max-width:1100px){#pg-cs [data-project="accessscope"] .cv4-product-dominant>.cv6-media-cluster[data-count="2"]{grid-template-columns:minmax(0,1fr);}}
/* One content-independent footer. It is never sized by the preceding route grid. */
html body footer.portfolio-footer>.footer-inner{width:100%;max-width:none;flex:0 0 100%;grid-column:1/-1;}
.portfolio-footer .footer-inner{padding:54px var(--page-edge) 26px;}

/* Frame geometry owns the outer object only. Authentic device masks, bezels and video pixels stay untouched. */
#pg-cs :is(.cv6-browser,.v4610-browser-device):not(.cv4-next-preview *):not(.aster-v46-board *){
 --frame-ratio:var(--v4610-browser-ratio,var(--evidence-ratio,1.6));--frame-bar:32px;
 width:min(100%,1040px,calc((var(--media-room) - var(--frame-bar)) * var(--frame-ratio)));
 max-width:100%;min-width:0;height:auto;min-height:0;max-height:none;margin-inline:auto;
}
#pg-cs .v4610-phone-device:not(.cv4-next-preview *){
 width:min(100%,260px,calc(var(--media-room) * var(--v44617-shell-ratio, .46)));max-width:100%;min-width:0;height:auto;max-height:none;min-height:0;
}
#pg-cs :is(.sp78-motion,.sp78-phone-stage){width:min(100%,268px,calc((var(--media-room) - 18px) * .46));max-width:100%;height:auto;min-height:0;max-height:none;margin-inline:auto;}
#pg-cs .cv6-phone:not(.cv4-next-preview *):not(.vt-next *){width:min(100%,268px,calc(var(--media-room) * .478));max-width:100%;height:auto;min-height:0;max-height:none;}
#pg-cs .sp78-motion .cv6-phone{width:100%;}
#pg-cs .sp78-motion .sp78-caption{margin-top:16px;}
#pg-cs .vt-section .vt-browser{width:min(100%,calc((var(--media-room) - 26px) * 1.6));justify-self:center;}
#pg-cs .v48-contextos-evidence-player{width:100%;max-width:100%;margin-inline:auto;}
#pg-cs .vt-player{width:min(230px,calc((var(--media-room) - 18px) * .464));max-width:100%;height:auto;min-height:0;max-height:none;flex:0 1 auto;justify-self:center;}
#pg-cs .do67-root .do67-player-slot .v4610-browser-device{width:min(100%,344px,calc(var(--media-room) * .8));max-width:100%;}
#pg-cs .v44-evidence-player.v4610-phone-player{width:100%;max-width:100%;margin-inline:auto;}
/* Static phone evidence shares the playing-device height budget, without replacing its hardware. */
#pg-cs .do67-phone{width:min(280px,calc(var(--media-room) * .46));max-width:100%;height:auto;max-height:none;}
#pg-cs .cv6-evidence-plain{width:100%;max-width:100%;height:auto;max-height:none;margin-inline:auto;}
#pg-cs .cv6-evidence-plain[data-device="preframed-mobile"]{width:min(100%,var(--preframed-width,260px),calc(var(--media-room) * var(--preframed-ratio,.46)));}
/* Preframed compositions retain their actual aspect ratio, rather than a single-phone width. */
#pg-cs [data-asset-id="lilly-protected-hero-embedded"]{--preframed-width:680px;--preframed-ratio:1.48148;}
@media(max-width:700px){#pg-cs .do67-hero-art .do67-phone{width:min(150px,calc(var(--media-room) * .46));}#pg-cs .do67-device-pair .do67-phone{width:min(218px,calc(var(--media-room) * .46));}}
/* The paired hero devices share the available columns; hardware remains intact.
   A small inset contains the Watch perspective without clipping its shell. */
#pg-cs .do67-hero-grid>*{min-width:0;}
#pg-cs .do67-hero-art{box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(16px,4vw,56px)!important;padding-inline:6px;}
#pg-cs .do67-hero-art :is(.do67-phone,.do71-watch-device){max-width:100%;justify-self:center;}
@media(max-width:700px){#pg-cs .do67-hero-art{gap:16px!important;}}
/* Outer media alignment and scrolling leave the complete artifact below both fixed bars. */
#pg-cs :is(.sp78-motion,.vt-player,.v44-evidence-player,.v48-contextos-evidence-player,.aster-v46-demo-evidence){scroll-margin-top:calc(var(--chrome-height) + 56px);}


/* Audience is a secondary text signal, never a third filter bar. */
.audience-context{font:500 12px/1.5 var(--sans);color:var(--shell-muted);}
.pc-audience{display:block;margin:0 0 12px;}
#pg-cs .project-audience{font:500 12px/1.5 var(--sans);display:flex;align-items:baseline;gap:12px;margin:20px 0 0;color:var(--hero-fg,var(--shell-ink));}
.project-audience>span:first-child{font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
.resume-web .rw-audience{font-size:12px;color:var(--shell-muted);margin:6px 0 0;}
/* Evidence belongs to the containing section, with no viewport-wide breakouts. */
#pg-cs :is(.aster-v46-demo-grid,.cv4-product-grid,.cv4-screen-sequence,.cv6-journey,.sp78-mobile-proof-pair,.do67-device-pair,.vt-restaurant-grid),
#pg-cs [data-project="accessscope"] .cv4-product-dominant>.cv6-media-cluster[data-count="2"]{
 width:100%;max-width:100%;margin-inline:0;min-width:0;
}
@media(min-width:601px){#pg-work#pg-work#pg-work [data-archive-grid]>.proj-card:nth-child(n){grid-column:auto!important;}}
@media(min-width:1101px){#pg-work#pg-work#pg-work [data-archive-grid]{grid-template-columns:repeat(3,minmax(0,1fr))!important;}}
@media(min-width:601px) and (max-width:1100px){#pg-work#pg-work#pg-work [data-archive-grid]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:1100px){
 #pg-cs .cv4-hero-grid{grid-template-columns:1fr;}
 #pg-cs .cv4-hero-copy{max-width:var(--reading-measure);}
 #pg-home .ia-home-grid{grid-template-columns:minmax(0,1fr) 270px;gap:32px;}
 .portfolio-footer .footer-actions{flex-direction:column;align-items:stretch;}
}
@media(max-width:820px){
 #pg-home .ia-home-grid{grid-template-columns:1fr;gap:24px;}
 #pg-home .ia-practices{grid-template-columns:1fr 1fr;gap:28px;}
 #pg-home .ia-home-close{grid-template-columns:100px minmax(0,1fr);gap:24px;}
 #pg-home .ia-home-close img{width:100px;height:124px;}
 #pg-home .ia-home-close>.ia-link{grid-column:2;}
 #pg-cs .aster-v46-demo,#pg-cs .vt-restaurant-grid{grid-template-columns:1fr;}
 .portfolio-footer .footer-utility{grid-template-columns:1fr auto;grid-template-areas:'brand copy' 'legal legal';gap:16px;}
 .portfolio-footer .footer-utility>span{justify-self:end;}.portfolio-footer .footer-home{margin:0;}
}
@media(max-width:600px){
 #pg-home .ia-home-hero{padding:32px 0;}
 #pg-home .ia-practices{gap:20px;}
 #pg-home .ia-home-close{grid-template-columns:80px minmax(0,1fr);gap:20px;padding:36px 0;}
 #pg-home .ia-home-close img{width:80px;height:108px;}
 #pg-work .work-sec.v95-work-root{padding-top:32px;}
 #pg-cs .cv4-product-grid{grid-template-columns:1fr;}
 .portfolio-footer .footer-inner{padding:36px var(--page-edge) 24px;}
 .portfolio-footer .footer-main{grid-template-columns:1fr;gap:24px;padding-bottom:32px;}
 .portfolio-footer .footer-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;}
 .portfolio-footer .footer-utility{grid-template-columns:1fr;grid-template-areas:'brand' 'legal' 'copy';gap:14px;}
 .portfolio-footer .footer-utility>span{justify-self:start;}
 html body .portfolio-footer .ft-legal{gap:4px 22px!important;}
}

@media(max-width:380px){#pg-home #hero-hl span{display:inline-block;text-wrap:wrap;}}

/* Narrow nested record columns put their labels above the explanation. */
#pg-cs :is(.cv6-chain-copy,.cv6-stress-copy,.cv6-record-copy){container-type:inline-size;}
@container(max-width:420px){#pg-cs :is(.cv6-record-field,.cv6-chain-fact){grid-template-columns:1fr;gap:7px;}}
@media(max-width:900px){
 html body #pg-cs #cs-wrap .cv4-root[data-project="contextos"] .cv4-product-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;}
 #pg-cs .cv4-root[data-project="contextos"] .cv4-product-copy{max-width:none;}
}

/* Project navigation is a quiet return link, distinct from a product CTA. */
html body #pg-cs #cs-wrap .project-return{
 display:inline-flex!important;align-items:center!important;gap:9px!important;
 width:max-content!important;max-width:100%!important;min-height:44px!important;
 padding:0 2px!important;margin:0 0 20px!important;border:0!important;border-radius:0!important;
 background:transparent!important;color:var(--hero-fg,inherit)!important;box-shadow:none!important;
 font:500 13px/1.4 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;
 text-decoration:none!important;transform:none!important;transition:none!important;
}
html body #pg-cs #cs-wrap .project-return::before,
html body #pg-cs #cs-wrap .project-return::after{content:none!important;}
html body #pg-cs #cs-wrap .project-return:hover>span:last-child{text-decoration:underline;text-underline-offset:5px;}
html body #pg-cs #cs-wrap .project-return:focus-visible{outline:2px solid currentColor!important;outline-offset:4px!important;}

/* Reading measure is internal; section dividers and evidence keep the common boundary. */
html body #pg-cs #cs-wrap :is(.cv4-lead,.sp78-copy-stack p,.cv4-section>p,.cv4-learning p){max-width:var(--reading-measure)!important;}
/* Phone comparisons use their column width instead of stacking small artifacts beside a stretched list. */
@media(min-width:901px){
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"])){
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center;
 }
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"]))>.cv4-product-copy{display:block;align-self:center;min-height:0;}
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"]))>.cv4-product-copy ul{display:block;width:100%;min-height:0;flex:1;}
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"]))>.cv4-product-copy li{display:block;flex:0;}
 html body #pg-cs #cs-wrap .cv4-product-grid>.cv6-media-cluster[data-count="2"]:has(>[data-device="preframed-mobile"]),
 html body #pg-cs #cs-wrap .v48-klariq-track-media{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:center;gap:24px;}
}

/* Tablet gives paired phone evidence a full internal row instead of shrinking both devices. */
@media(max-width:1100px){
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"])){
  grid-template-columns:minmax(0,1fr)!important;gap:28px!important;
 }
 html body #pg-cs #cs-wrap .cv4-product-grid:has(> :is(.cv6-media-cluster,.v48-klariq-track-media) :is(.v4610-phone-device,[data-device="preframed-mobile"]))>.cv4-product-copy{max-width:var(--reading-measure);}
}
@media(min-width:601px) and (max-width:1100px){
 html body #pg-cs #cs-wrap .cv4-product-grid>.cv6-media-cluster[data-count="2"]:has(>[data-device="preframed-mobile"]),
 html body #pg-cs #cs-wrap .v48-klariq-track-media{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:center;gap:24px;}
}

/* Headings fill their allocated column. Paragraph measures remain internal. */
html body #pg-cs#pg-cs #cs-wrap :is(h1,h2,h3){text-wrap:wrap!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;}
html body #pg-cs#pg-cs #cs-wrap .cv4-hero-copy{max-width:none!important;min-width:0;}
html body #pg-cs #cs-wrap .vt-section-head{max-width:none;}
html body #pg-cs #cs-wrap .vt-section-head>p{max-width:72ch;}
html body #pg-cs #cs-wrap .vt-hero-description{max-width:60ch;}
html body .lg-head{max-width:none;}