/* Monthly presentation layer. Uses Xavryn's recovered ink, paper, slate-blue and Inter tokens. */
.offer-hero{grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);column-gap:clamp(30px,6vw,92px);row-gap:27px}
.offer-copy{grid-column:1;grid-row:1}
.offer-visual{grid-column:2;grid-row:1;align-self:center;min-width:0;position:relative;z-index:1;color:var(--ink)}
.build-path,.offer-baseline{grid-column:1/-1}
.offer-visual-meta,.offer-visual-caption{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font:9px/1.45 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.offer-visual-meta{margin:0 0 10px}
.offer-window{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:0 24px 60px #18253612}
.offer-window-bar{height:33px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 10px;background:#eceef0;color:#58616b;font:8px/1.3 var(--mono);letter-spacing:.07em}
.offer-window-lights{display:flex;gap:4px;flex:0 0 auto}.offer-window-lights i{width:6px;height:6px;border-radius:50%;background:#a9afb7}.offer-window-lights i:first-child{background:#8b98a7}.offer-window-lights i:nth-child(2){background:#a9b3bd}.offer-window-lights i:nth-child(3){background:#6f879f}
.offer-visual-caption{margin-top:9px;font-size:8px;letter-spacing:.04em;text-transform:none}

.portfolio-showcase{position:relative;overflow:hidden;padding:clamp(70px,8vw,108px) 0 clamp(44px,6vw,72px);background:var(--paper);color:var(--ink);border-block:1px solid var(--line)}
.portfolio-shell{width:min(100%,1480px);margin:0 auto}
.portfolio-heading{width:min(1120px,calc(100% - 48px));margin:0 auto clamp(32px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.58fr);align-items:end;gap:clamp(28px,5vw,70px)}
.portfolio-kicker,.portfolio-card-index{margin:0;color:var(--green);font:10px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.portfolio-heading h2{max-width:13ch;margin:13px 0 14px;font:590 clamp(42px,5.6vw,72px)/.98 var(--sans);letter-spacing:-.065em}
.portfolio-heading h2 span{color:var(--green)}
.portfolio-intro{max-width:45ch;margin:0 0 2px;color:var(--muted);font-size:14px;line-height:1.65}
.portfolio-heading-aside{display:grid;gap:22px;align-content:end}
.portfolio-controls{display:flex;align-items:center;gap:9px}
.portfolio-count{min-width:60px;margin-right:auto;color:#737981;font:10px var(--mono);letter-spacing:.1em}
.portfolio-count strong{color:var(--ink);font-weight:600}
.portfolio-arrow{width:43px;height:43px;border:1px solid #bfc5cd;background:transparent;color:var(--ink);font-size:20px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.portfolio-arrow:hover{background:var(--deep);color:#fffefa;border-color:var(--deep);transform:translateY(-2px)}
.portfolio-arrow:disabled{opacity:.42;cursor:not-allowed;transform:none}
.portfolio-arrow:focus-visible,.viewport-toggle:focus-visible,.portfolio-cta:focus-visible,.portfolio-viewport:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.portfolio-viewport{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;touch-action:pan-x pan-y;cursor:grab}
.portfolio-viewport:active,.portfolio-viewport.is-dragging{cursor:grabbing}
.portfolio-viewport::-webkit-scrollbar{display:none}
.portfolio-track{display:flex;align-items:stretch;gap:28px;width:max-content;padding-inline:max(24px,calc((100vw - 1000px)/2))}
.portfolio-card{flex:0 0 min(1000px,calc(100vw - 112px));min-width:0;scroll-snap-align:center;scroll-snap-stop:always}
.portfolio-card-heading{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:13px}
.portfolio-card-index{font-size:9px;letter-spacing:.1em}
.portfolio-card-heading h3{margin:4px 0 0;font:590 clamp(19px,2vw,23px)/1.12 var(--sans);letter-spacing:-.045em}
.study-label{flex:0 0 auto;border:1px solid #c8cdd3;padding:7px 10px;color:#606874;font:9px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.study-label-concept{border-color:#b8c5d2;color:#526c88}
.desktop-window{overflow:hidden;border:1px solid #c5cad0;background:var(--white);box-shadow:0 22px 58px #18253612}
.browser-chrome{height:42px;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:13px;padding:0 13px;background:#eceef0;color:#5a626c}
.browser-lights{display:flex;gap:5px}
.browser-lights i{width:8px;height:8px;border-radius:50%;background:#a6adb5}
.browser-lights i:first-child{background:#8796a5}.browser-lights i:nth-child(2){background:#aeb8c1}.browser-lights i:nth-child(3){background:#7188a0}
.browser-address{justify-self:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:9px/1.4 var(--mono);letter-spacing:.08em;color:#6e7680}
.browser-address span{padding:0 8px;color:#a4aab1}
.viewport-toggle{min-height:28px;display:inline-flex;align-items:center;gap:8px;border:1px solid #c1c7ce;padding:4px 9px;background:var(--white);color:#3f4c5b;font:9px/1.3 var(--mono);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.viewport-toggle:hover,.viewport-toggle[aria-pressed="true"]{background:var(--deep);color:#fffefa;border-color:var(--deep)}
.site-viewport{position:relative;height:clamp(360px,39vw,500px);overflow:hidden;background:var(--white)}
.site-viewport iframe{display:block;width:100%;height:100%;flex:0 0 auto;border:0;background:var(--white);overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.site-viewport.is-phone{display:flex;justify-content:center;background:#e8eaed}
.portfolio-card-caption{max-width:65ch;margin:13px 0 0;color:#5f6670;font-size:12px;line-height:1.55}
.portfolio-bottomline{width:min(1120px,calc(100% - 48px));margin:28px auto 0;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}
.portfolio-bottomline p{display:flex;align-items:center;gap:10px;margin:0;color:#656d77;font-size:11px;line-height:1.5}
.portfolio-swipe-mark{color:var(--green);font:18px var(--sans)}
.portfolio-cta{display:inline-flex;align-items:center;gap:22px;min-height:46px;padding:0 15px;border:1px solid var(--deep);background:var(--deep);color:#fffefa;font-size:11px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s,transform .2s}
.portfolio-cta:hover{transform:translateY(-2px);background:#26384c;border-color:#26384c}
.portfolio-cta-arrow{position:relative;display:inline-block;width:14px;height:14px;flex:0 0 14px}
.portfolio-cta-arrow:before{content:"";position:absolute;top:3px;right:1px;width:11px;height:1.5px;background:currentColor;transform:rotate(-45deg);transform-origin:right center}
.portfolio-cta-arrow:after{content:"";position:absolute;top:0;right:0;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.portfolio-disclaimer{width:min(1120px,calc(100% - 48px));margin:12px auto 0;color:#818790;font-size:10px;line-height:1.55}
.portfolio-progress{width:clamp(76px,9vw,128px);height:2px;overflow:hidden;background:#d9dde2;flex:0 0 auto}
.portfolio-progress span{display:block;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}

@media(max-width:760px){
 .offer-hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:25px;padding-top:calc(94px + env(safe-area-inset-top));padding-bottom:40px}
 .offer-copy,.offer-visual,.build-path,.offer-baseline{grid-column:1;grid-row:auto}
 .offer-visual{margin-top:1px}
 .offer-window{transform:none}
 .offer-window-bar{height:29px;font-size:6px}
 .offer-visual-meta,.offer-visual-caption{font-size:7px}
 .portfolio-showcase{padding-top:62px;padding-bottom:40px}
 .portfolio-heading{width:calc(100% - 40px);grid-template-columns:1fr;gap:16px;margin-bottom:27px}
 .portfolio-heading h2{max-width:12ch;font-size:clamp(39px,10vw,52px);margin:10px 0 12px}
 .portfolio-heading-aside{gap:17px}
 .portfolio-intro{font-size:12px;max-width:43ch}
 .portfolio-controls{justify-content:flex-end}
 .portfolio-count{margin-right:auto}
 .portfolio-controls{display:grid;grid-template-columns:minmax(0,1fr) 43px 43px;gap:8px}
 .portfolio-count{grid-column:1;grid-row:1;margin:0}
 .portfolio-arrow[data-carousel-direction="prev"]{grid-column:2;grid-row:1}
 .portfolio-arrow[data-carousel-direction="next"]{grid-column:3;grid-row:1}
 .portfolio-progress{width:100%;grid-column:1/-1;grid-row:2}
 .portfolio-track{gap:16px;padding-inline:20px}
 .portfolio-card{flex-basis:calc(100vw - 40px)}
 .portfolio-card-heading{align-items:flex-start;min-height:60px;margin-bottom:10px;gap:10px}
 .portfolio-card-heading h3{font-size:18px;max-width:18ch}
 .study-label{max-width:126px;padding:6px 7px;font-size:7px;line-height:1.35;text-align:center}
 .browser-chrome{height:38px;grid-template-columns:34px minmax(0,1fr) auto;gap:7px;padding:0 7px}
 .browser-lights{gap:4px}.browser-lights i{width:6px;height:6px}
 .browser-address{font-size:6px;letter-spacing:.03em}.browser-address span{padding:0 3px}
 .viewport-toggle{min-height:25px;gap:4px;padding:3px 6px;font-size:7px}
 .site-viewport{height:min(45vh,380px);min-height:315px}
 .portfolio-card-caption{margin-top:10px;font-size:11px}
 .portfolio-bottomline{width:calc(100% - 40px);align-items:flex-start;flex-direction:column;margin-top:25px}
 .portfolio-bottomline p{font-size:10px}
 .portfolio-cta{align-self:stretch;justify-content:space-between}
 .portfolio-disclaimer{width:calc(100% - 40px);font-size:9px}
}
@media(max-width:380px){
 .portfolio-card-heading h3{font-size:16px}
 .study-label{max-width:112px;font-size:6px}
 .browser-address{display:none}
 .browser-chrome{grid-template-columns:38px minmax(0,1fr)}
 .viewport-toggle{justify-self:end}
}
@media(prefers-reduced-motion:reduce){.portfolio-viewport{scroll-behavior:auto}.portfolio-arrow,.viewport-toggle,.portfolio-cta,.portfolio-progress span{transition:none}}

/* Editorial scale correction: keep the original Inter / paper / slate-blue system. */
.xavryn-commercial .offer-copy h1{max-width:none;font-size:clamp(40px,4.15vw,58px);line-height:1.02;letter-spacing:-.065em}
.portfolio-heading{grid-template-columns:minmax(0,1.08fr) minmax(280px,.72fr);gap:clamp(32px,5vw,64px);margin-bottom:clamp(27px,3.2vw,38px)}
.portfolio-heading h2{max-width:none;font-size:clamp(40px,4vw,56px);line-height:1.02;letter-spacing:-.06em}
.portfolio-intro{max-width:43ch;font-size:13px;line-height:1.62}
.portfolio-track{gap:24px;padding-inline:max(28px,calc((100vw - 860px)/2))}
.portfolio-card{flex-basis:min(860px,calc(100vw - 100px))}
.portfolio-card-heading{min-height:54px;margin-bottom:10px}
.desktop-window{box-shadow:0 18px 44px #18253610}
.browser-chrome{height:36px}
.site-viewport{height:clamp(320px,30vw,420px)}
.portfolio-card-caption{margin-top:11px;font-size:11px}
.portfolio-showcase{padding-top:clamp(54px,6vw,78px);padding-bottom:clamp(36px,5vw,58px)}
.offer-window-live .offer-window-bar{display:grid;grid-template-columns:58px minmax(0,1fr) auto;height:34px}
.offer-window-live .offer-window-bar>span:nth-child(2){justify-self:center;white-space:nowrap}
.offer-window-live .offer-window-bar>span:nth-child(2) b{padding:0 8px;color:#a4aab1;font-weight:400}
.offer-window-live .offer-window-bar>span:last-child{font-size:7px;white-space:nowrap}
.offer-preview{height:clamp(300px,26vw,370px);background:var(--white)}
.offer-visual-caption{align-items:center;text-transform:none}
.offer-visual-caption a{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:9px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.offer-visual-caption a b{color:var(--green);font-size:13px;font-weight:450;transition:transform .2s}
.offer-visual-caption a:hover b{transform:translateY(2px)}
@media(max-width:760px){
 .xavryn-commercial .offer-copy h1{max-width:none;font-size:clamp(35px,9.1vw,40px);line-height:1.02}
 .portfolio-heading{grid-template-columns:1fr;gap:10px;margin-bottom:21px}
 .portfolio-heading h2{max-width:none;font-size:clamp(32px,8.4vw,36px);line-height:1.04;margin:9px 0 10px}
 .portfolio-heading-aside{gap:12px}
 .portfolio-intro{font-size:11px;line-height:1.55}
 .portfolio-track{gap:14px;padding-inline:20px}
 .portfolio-card{flex-basis:calc(100vw - 40px)}
 .portfolio-card-heading{min-height:54px;margin-bottom:8px}
 .browser-chrome{height:32px}
 .site-viewport{height:min(40vh,340px);min-height:290px}
 .portfolio-card-caption{font-size:10px;line-height:1.5}
 .portfolio-showcase{padding-top:48px;padding-bottom:32px}
 .offer-window-live .offer-window-bar{grid-template-columns:32px minmax(0,1fr) auto;height:30px;padding-inline:7px;gap:5px}
 .offer-window-live .offer-window-bar>span:nth-child(2){font-size:6px;letter-spacing:.03em}
 .offer-window-live .offer-window-bar>span:nth-child(2) b{padding:0 3px}
 .offer-window-live .offer-window-bar>span:last-child{font-size:5px;letter-spacing:.04em}
 .offer-preview{height:min(36vh,304px);min-height:258px}
 .offer-visual-caption{font-size:7px}
 .offer-visual-caption a{font-size:8px}
}

/* Refinement pass: return the hero to Xavryn's editorial layout and let the
   original case studies carry the visual weight once, in the selected-work rail. */
.xavryn-commercial .offer-hero{
 grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
 column-gap:clamp(42px,7vw,100px);
 row-gap:28px;
 min-height:0;
 align-content:start;
 padding:calc(118px + env(safe-area-inset-top)) clamp(22px,5vw,76px) 42px;
}
.xavryn-commercial .offer-copy{grid-column:1;grid-row:1;max-width:680px}
.xavryn-commercial .offer-copy h1{
 max-width:none;
 font-size:clamp(38px,3.45vw,48px);
 line-height:1.035;
 letter-spacing:-.063em;
}
.xavryn-commercial .offer-copy h1 span{
 display:inline-block;
 margin-top:.12em;
 color:var(--green);
 font-size:.65em;
 line-height:1.16;
 letter-spacing:-.048em;
}
.xavryn-commercial .offer-intro{max-width:43ch;margin:18px 0 22px;font-size:15px;line-height:1.62}
.xavryn-commercial .offer-actions{gap:12px 20px}
.xavryn-commercial .build-path{
 grid-column:2;
 grid-row:1;
 align-self:center;
 grid-template-columns:minmax(0,1fr);
 gap:0;
 padding-top:0;
 border-top:1px solid var(--line);
 counter-reset:monthly-step;
}
.xavryn-commercial .path-step{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;min-height:69px;padding:10px 0;gap:10px;counter-increment:monthly-step}
.xavryn-commercial .path-step::before{content:"0" counter(monthly-step);grid-column:1;color:var(--green);font:10px/1.4 var(--mono);letter-spacing:.06em}
.xavryn-commercial .path-step .path-node{display:none}
.xavryn-commercial .path-step>div{grid-column:2;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:18px}
.xavryn-commercial .path-step h2{grid-column:1;grid-row:1;max-width:18ch;font-size:16px;line-height:1.2;letter-spacing:-.035em}
.xavryn-commercial .path-step p{grid-column:2;grid-row:1;max-width:24ch;margin:0;font-size:11px;line-height:1.42}
.xavryn-commercial .offer-baseline{grid-column:1/-1;grid-row:2;padding-top:12px;font-size:10px}

.portfolio-heading{grid-template-columns:minmax(0,1.08fr) minmax(250px,.72fr);gap:clamp(28px,4vw,54px)}
.portfolio-heading h2{font-size:clamp(35px,3vw,42px);line-height:1.04;letter-spacing:-.055em}
.portfolio-intro{max-width:39ch;font-size:12px;line-height:1.6}
.portfolio-track{gap:22px;padding-inline:max(28px,calc((100vw - 800px)/2))}
.portfolio-card{flex-basis:min(800px,calc(100vw - 104px))}
.portfolio-card-heading{min-height:50px;margin-bottom:9px}
.portfolio-card-heading h3{font-size:19px;letter-spacing:-.04em}
.site-viewport{height:clamp(300px,27vw,380px)}
.desktop-window{box-shadow:0 16px 36px #1825360d}
.browser-chrome{height:33px}
.portfolio-showcase{padding-top:clamp(48px,5.6vw,70px);padding-bottom:clamp(32px,4vw,48px)}
.portfolio-bottomline{margin-top:22px;padding-top:13px}

/* Bring legacy Monthly section headings into one readable editorial scale. */
.xavryn-commercial .business-shift h2{max-width:18ch;font-size:clamp(34px,3.35vw,46px);line-height:1.06;letter-spacing:-.055em}
.xavryn-commercial .homepage-demo-offer h2{max-width:14ch;font-size:clamp(36px,3.8vw,52px);line-height:1.04;letter-spacing:-.055em}
.xavryn-commercial .pricing-heading h2{font-size:clamp(38px,4.1vw,56px);line-height:1.03;letter-spacing:-.058em}
.xavryn-commercial .care-heading h2{max-width:16ch;font-size:clamp(38px,3.8vw,52px);line-height:1.04;letter-spacing:-.055em}
.xavryn-commercial .home-faq-heading h2{max-width:15ch;font-size:clamp(38px,3.8vw,52px);line-height:1.04;letter-spacing:-.055em}
.xavryn-commercial .offer-close h2{max-width:16ch;font-size:clamp(38px,3.7vw,50px);line-height:1.04;letter-spacing:-.055em}
.xavryn-commercial .monthly-contact h2{max-width:13ch;font-size:clamp(36px,3.8vw,52px);line-height:1.04;letter-spacing:-.055em}

@media(max-width:760px){
 .xavryn-commercial .offer-hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:22px;padding:calc(88px + env(safe-area-inset-top)) 20px 34px}
 .xavryn-commercial .offer-copy,.xavryn-commercial .build-path,.xavryn-commercial .offer-baseline{grid-column:1;grid-row:auto}
 .xavryn-commercial .offer-copy h1{max-width:none;font-size:clamp(33px,8.5vw,36px);line-height:1.035}
 .xavryn-commercial .offer-copy h1 span{font-size:.68em;line-height:1.15;margin-top:.13em}
 .xavryn-commercial .offer-intro{max-width:42ch;margin:14px 0 18px;font-size:14px;line-height:1.58}
 .xavryn-commercial .build-path{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
 .xavryn-commercial .path-step{grid-template-columns:23px minmax(0,1fr);min-height:64px;padding:9px 0;gap:8px}
 .xavryn-commercial .path-step>div{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px}
 .xavryn-commercial .path-step h2{font-size:13px;line-height:1.22}
 .xavryn-commercial .path-step p{font-size:9px;line-height:1.38}
 .xavryn-commercial .offer-baseline{gap:10px;font-size:9px;line-height:1.45}
 .portfolio-heading{grid-template-columns:1fr;gap:9px;margin-bottom:18px}
 .portfolio-heading h2{max-width:17ch;font-size:clamp(29px,7.5vw,32px);line-height:1.06;margin:8px 0 8px}
 .portfolio-intro{max-width:43ch;font-size:11px;line-height:1.55}
 .portfolio-heading-aside{gap:11px}
 .portfolio-track{gap:13px;padding-inline:20px}
 .portfolio-card{flex-basis:calc(100vw - 40px)}
 .portfolio-card-heading{min-height:48px;margin-bottom:8px}
 .portfolio-card-heading h3{font-size:17px;line-height:1.16}
 .site-viewport{height:min(34vh,290px);min-height:250px}
 .browser-chrome{height:30px}
 .portfolio-card-caption{margin-top:8px;font-size:10px;line-height:1.48}
 .portfolio-showcase{padding-top:42px;padding-bottom:30px}
 .portfolio-bottomline{margin-top:19px;padding-top:12px}
 .xavryn-commercial .business-shift h2{max-width:17ch;font-size:clamp(30px,8vw,34px);line-height:1.06}
 .xavryn-commercial .homepage-demo-offer h2{max-width:16ch;font-size:clamp(30px,8vw,34px);line-height:1.05}
 .xavryn-commercial .pricing-heading h2{font-size:clamp(34px,8.8vw,38px);line-height:1.04}
 .xavryn-commercial .care-heading h2{max-width:15ch;font-size:clamp(32px,8.4vw,36px);line-height:1.05}
 .xavryn-commercial .home-faq-heading h2{max-width:15ch;font-size:clamp(32px,8.4vw,36px);line-height:1.05}
 .xavryn-commercial .offer-close h2{max-width:16ch;font-size:clamp(32px,8.4vw,36px);line-height:1.05}
 .xavryn-commercial .monthly-contact h2{max-width:13ch;font-size:clamp(32px,8.4vw,36px);line-height:1.05}
}
@media(max-width:380px){
 .xavryn-commercial .offer-copy h1{font-size:32px}
 .xavryn-commercial .offer-intro{font-size:13px}
 .xavryn-commercial .path-step h2{font-size:12px}
}