/* Section 3 owns its layout. No styles target either preceding section. */
.demo25-card[data-visible=false],.demo25-category[data-visible=false]{visibility:hidden!important;pointer-events:none!important}
.demo25-window iframe[hidden]{display:none}
.demo25-external-preview{display:block;width:100%;height:calc(100% - 26px);object-fit:contain;background:#060a0e}
.demo25{position:relative;--demo-h:100svh;--entry:1;--art:1;--title-y:0px;--title-scale:1;--energy:1;color:#fff6e8}
.demo25-stage{height:var(--demo-h);position:relative}
.demo25-field{position:absolute;inset:0;z-index:0;mix-blend-mode:screen;pointer-events:none;opacity:var(--energy);transition:opacity .18s linear}
.demo25-field canvas{display:block;position:absolute;left:0;top:calc(-.4 * var(--demo-h));mask-image:linear-gradient(to bottom,transparent,black 6%,black 96%,transparent)}
.demo25-content{position:relative;z-index:1;height:100%;max-width:1920px;margin:auto}
.demo25-title{position:absolute;left:4.15%;top:24%;width:43%;font:italic 400 clamp(62px,6.2vw,120px)/.99 'Times New Roman',Times,serif;letter-spacing:-.052em;margin:0;text-wrap:balance;color:#fffaf3}
.demo25-selector{position:absolute;left:4.4%;top:56%;width:34%;height:36%;display:grid;grid-template-columns:38px 1fr;column-gap:22px;align-content:start}
.demo25-direction{display:flex;flex-direction:column;align-items:center;height:138px;gap:10px}
.demo25-direction:before{content:'';position:absolute;left:18px;top:33px;width:1px;height:72px;background:#d8ded84d}
.demo25-arrow{position:relative;background:none;border:0;color:#dfded9;width:38px;height:38px;cursor:pointer;font:300 29px/1 Arial}
.demo25-arrow:last-child{margin-top:auto}
.demo25-categories{height:138px;position:relative;overflow:visible}
.demo25-category{position:absolute;top:0;left:0;display:flex;align-items:center;gap:13px;background:none;border:0;color:#d5d5d2;padding:5px 0;text-align:left;font-size:clamp(17px,1.6vw,28px);font-weight:300;white-space:nowrap;cursor:pointer;transition:transform .6s cubic-bezier(.22,.75,.18,1),color .4s,opacity .4s}
.demo25-category:before{content:'';height:1px;width:21px;flex:none;background:currentColor;opacity:.65}
.demo25-category[aria-current=true]{color:#fffaf3}
.demo25-explore{grid-column:2;justify-self:start;margin:22px 0 0 34px;display:inline-flex;align-items:center;gap:20px;border:1px solid #a6ada55c;border-radius:3px;background:#040707a6;color:#ecebe6;padding:12px 18px;cursor:pointer;font-size:15px;font-weight:300;transition:border-color .2s,background .2s}
.demo25-explore span{transition:transform .2s}.demo25-explore:hover{border-color:#d7e4df;background:#10202799}.demo25-explore:hover span{transform:translateX(3px)}
.demo25-stack{position:absolute;inset:0 1% 0 43%;perspective:1800px;overflow:clip;clip-path:inset(2% -8% 1% -10%);mask-image:linear-gradient(to bottom,transparent,black 7%,black 91%,transparent);touch-action:pan-y}
.demo25-card{--slot:0;position:absolute;left:54%;top:52%;width:min(49vw,calc(var(--demo-h) * 1.00));padding:6px;background:linear-gradient(145deg,#34383a,#0a0d0e 45%,#242729);border:1px solid #7b7e805c;border-radius:11px;color:#9ba0a4;cursor:pointer;transform:translate(-50%,-50%) translateY(calc(var(--slot) * var(--demo-h) * .32)) perspective(1600px) rotateY(-13deg) rotateZ(-1.2deg) scale(var(--card-scale,1));opacity:var(--card-opacity,1);transition:transform .65s cubic-bezier(.2,.78,.18,1),opacity .5s,box-shadow .25s;box-shadow:0 26px 45px #0009;will-change:transform}
@media(hover:hover){.demo25-card:hover{box-shadow:0 0 0 1px #61b8e175,0 0 14px #328ab733,0 26px 45px #0009}}
.demo25-card:not([data-active=true]){--card-scale:.84;--card-opacity:1;filter:brightness(.64)}
.demo25-card[data-active=true]{z-index:4}
.demo25-chrome{display:flex;align-items:center;height:19px;gap:4px;padding:0 6px 4px}
.demo25-chrome i{width:4px;height:4px;background:#9e8b85;border-radius:50%}.demo25-chrome i:nth-child(2){background:#a3a592}.demo25-chrome i:nth-child(3){background:#87a294}
.demo25-address{margin:auto;font:7px Arial;letter-spacing:.015em;opacity:.7}.demo25-chrome b{font:10px Arial;opacity:.6}
.demo25-card{container-type:inline-size}
.demo25-shot{display:block;width:100%;height:49cqw;object-fit:cover;object-position:top;border-radius:4px;background:#1c2021}
.demo25-hint{display:none}
.demo25-plaque,.demo25-control-frame{display:none}
.demo25-pause{position:absolute;left:4.4%;bottom:17px;color:#949c9e;background:transparent;border:0;padding:8px 0;font:300 11px 'Helvetica Neue Local',Arial;letter-spacing:.04em;cursor:pointer;z-index:5}
.demo25-error{position:absolute;left:4%;bottom:50px;max-width:280px;font-size:12px;color:#aab2b5}
.demo25-dialog{padding:0;border:0;background:transparent;color:#efeee8;width:min(94vw,1480px);max-width:none;height:min(94svh,1100px);max-height:none;overflow:visible}
.demo25-dialog::backdrop{background:#000e;backdrop-filter:blur(6px)}
.demo25-dialog-shell{height:100%;display:flex;flex-direction:column}
.demo25-window{position:relative;flex:1;min-height:0;border:1px solid #5f6567;border-radius:9px;background:#101416;padding:8px;display:flex;flex-direction:column;box-shadow:0 24px 100px #000b}
.demo25-window .demo25-chrome{height:22px;flex:none}
.demo25-window iframe{display:block;border:0;flex:1;min-height:0;width:100%;border-radius:4px;background:#f8f7f3}
.demo25-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#646d71;pointer-events:none}
/* The legal site's mobile story requires a viewport at least 500px tall.
   Give the original page the screen instead of spending it on demo metadata. */
@media (max-width:767px){
 .demo25-dialog[data-project="legal"]{width:100vw;height:100dvh;max-height:100dvh;margin:0;overflow:auto}
 .demo25-dialog[data-project="legal"] .demo25-dialog-shell{min-height:100%;height:auto}
 .demo25-dialog[data-project="legal"] .demo25-window{flex:none;height:max(650px,calc(100dvh - 42px));box-sizing:border-box;padding:4px;border-radius:0}
 .demo25-dialog[data-project="legal"] .demo25-window .demo25-chrome{height:18px}
 .demo25-dialog[data-project="legal"] .demo25-modal-actions{position:sticky;bottom:0;flex:none;min-height:42px;box-sizing:border-box;margin:0;padding:8px 12px;background:#101416;z-index:2}
 .demo25-dialog[data-project="legal"] .demo25-info{display:none}
}
.demo25-modal-actions{display:flex;gap:24px;justify-content:space-between;align-items:center;padding:17px 4px 12px}
.demo25-back,.demo25-open{display:inline-flex;align-items:center;gap:13px;border:0;background:none;padding:7px 0;color:#f0eee8;text-decoration:none;font-size:15px;font-weight:300;cursor:pointer}
.demo25-back span{transition:transform .2s}.demo25-back:hover span{transform:translateX(-4px)}.demo25-back:active{transform:scale(.98)}
.demo25-info{display:flex;align-items:baseline;gap:10px 18px;flex-wrap:wrap;font-size:12px;line-height:1.4;color:#a8aeae;padding:0 4px 3px}
.demo25-info strong{font-weight:400;color:#e5e5df;font-size:14px}.demo25-info p{margin:0}.demo25-limit{flex-basis:100%;color:#929b9c}
@media(max-width:1050px) and (min-width:701px){
 .demo25-title{font-size:clamp(54px,6.6vw,70px);width:45%;top:24%}
 .demo25-selector{left:4%;width:40%;grid-template-columns:30px 1fr;column-gap:10px}
 .demo25-category{font-size:16px;gap:9px}.demo25-explore{font-size:14px;margin-left:30px}
 .demo25-card{left:52%;width:min(50vw,calc(var(--demo-h) * 1.00))}
}
@media(max-width:700px){
 .demo25{height:calc(var(--demo-h) + var(--demo-entry-distance,0px))}
 .demo25-stage{position:sticky;top:0;overflow:visible}
 .demo25-field canvas{top:0;mask-image:linear-gradient(to bottom,transparent,black 5%,black 93%,transparent)}
 .demo25-title{left:7%;top:6.5%;width:86%;text-align:center;font-size:clamp(38px,11.8vw,69px);line-height:1.01;transform:translateY(var(--title-y)) scale(var(--title-scale));transform-origin:center top;z-index:5;opacity:var(--demo-visibility,1)}
 .demo25-selector{display:none}
 .demo25-stack{inset:0;clip-path:none;mask-image:none;perspective:1200px;overflow:visible;opacity:var(--art);transform:translateY(calc((1 - var(--art)) * 36px));pointer-events:var(--demo-interaction,auto)}
 .demo25-card{top:64%;left:50%;width:min(84vw,calc(var(--demo-h) * .55));padding:5px;border-radius:9px;transform:translate(-50%,-50%) translateY(calc(var(--slot) * var(--demo-h) * .218)) perspective(1600px) rotateY(-7deg) rotateZ(-.8deg) scale(var(--card-scale,1))}
 .demo25-card:not([data-active=true]){--card-scale:.87;--card-opacity:1;filter:brightness(.67)}
 .demo25-card[data-active=true]{touch-action:none}
 .demo25-card:not([data-active=true]){touch-action:pan-y}
 .demo25-shot{height:56cqw}
 .demo25-chrome{height:14px;padding:0 3px 3px;gap:3px}
 .demo25-chrome i{width:3px;height:3px}.demo25-address{font-size:5px}
 .demo25-hint{display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;left:0;width:100%;top:23%;color:#e4e8e6;text-shadow:0 1px 8px #000,0 1px 3px #000;font-size:11px;font-weight:300;opacity:var(--hint,0);pointer-events:none}
 .demo25-hint span:first-child{font:22px/1 Arial}
 .demo25-hint-inner{display:flex;flex-direction:column;align-items:center;gap:5px;animation:demo25-breathe 1.8s ease-in-out infinite}
 .demo25.has-swiped .demo25-hint-inner{animation:none;opacity:1}
 .demo25-pause{left:auto;right:5%;bottom:5px;font-size:9px;opacity:var(--art)}
 .demo25-dialog{width:94vw;height:94svh}
 .demo25-modal-actions{padding:12px 3px 8px;gap:10px}
 .demo25-back,.demo25-open{font-size:13px;gap:8px}
 .demo25-info{font-size:10px;gap:4px 10px}.demo25-info strong{font-size:12px}
}
@keyframes demo25-breathe{0%,100%{opacity:1}50%{opacity:.12}}
/* User correction: desktop has a genuine upper composition area, not an
   internal clipping line. The viewport alone crops off-screen previews. */
@media(min-width:701px){
 .demo25{height:var(--demo-extent,var(--demo-h))}
 .demo25-content{top:var(--demo-content-y,0px)}
 .demo25.is-measuring-layout .demo25-card{transition:none!important}
 /* Latest user direction: editorial labels and circular controls from the
    supplied reference supersede the older circle/pill prohibition. */
 .demo25-selector{--demo-category-pitch:clamp(36px,6.4svh,62px);--selector-track:clamp(136px,27.6svh,252px);top:54%;height:auto;grid-template-columns:38px 1fr;column-gap:22px}
 .demo25-direction,.demo25-categories{height:var(--selector-track)}
 .demo25-direction:before{left:18.5px;top:49px;height:calc(var(--selector-track) - 98px);background:linear-gradient(#a9c0bc3d,#d4ded357,#a9c0bc3d)}
 .demo25-arrow{display:grid;place-items:center;width:38px;height:38px;border:1px solid #cbd3c5;border-radius:50%;background:#0003;color:#f2f4e5;transition:color .2s,border-color .2s,background .2s}
 .demo25-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
 .demo25-arrow:hover{border-color:#ecf2de;background:#dae8dd0c;color:#fff6e8}
 .demo25-categories .demo25-category{top:calc(50% - .55em - 5px);gap:17px;font:400 clamp(20px,2.05vw,35.5px)/1.1 'Baskerville Old Face','Times New Roman',Times,serif;letter-spacing:-.01em;color:#e5bea0}
 .demo25-category:before{width:22px;opacity:.85}
 .demo25-categories .demo25-category[aria-current=true]{color:#fff6e8}
 .demo25-explore{grid-column:1/-1;margin:clamp(15px,2.35svh,23px) 0 0;min-width:clamp(190px,14.75vw,248px);height:clamp(44px,6.2svh,59px);padding:0 clamp(21px,1.65vw,29px);gap:22px;justify-content:space-between;border:1px solid transparent;border-radius:999px;background:linear-gradient(#010706,#010706) padding-box,linear-gradient(110deg,#60e8dc,#a6e2c7 52%,#4de9e4) border-box;color:#f5f1e6;font:300 clamp(16px,1.26vw,21px)/1 'Helvetica Neue Local',Arial,sans-serif;box-shadow:inset 0 0 14px #81bda00b;transition:filter .2s,box-shadow .2s}
 .demo25-explore span{display:flex}.demo25-explore svg{width:29px;height:20px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
 .demo25-explore:hover{background:linear-gradient(#07100d,#07100d) padding-box,linear-gradient(110deg,#b8f1df,#a8b9af 52%,#dfedcd) border-box;box-shadow:0 0 15px #7ab9a312}
 .demo25-selector button:focus-visible{outline:2px solid #fff6e8;outline-offset:5px}
 .demo25-field{transition:none}
 .demo25-stack .demo25-card{left:52%;width:min(47vw,calc(var(--demo-h) * 1.00))}
 .demo25-title{font-size:clamp(54px,min(6.2vw,13svh),120px)}
 .demo25-category{top:51px}
 .demo25{margin-top:clamp(88px,18svh,170px)}
 /* The old +/-22% box extended document scroll after its visible cards.
    Equal top/bottom removal preserves the exact projected centre and allows
    previews to overflow naturally without leaving an empty scroll tail. */
 .demo25-stack{top:0;bottom:0;overflow:visible;clip-path:none;mask-image:none}
 .demo25-card{top:calc(50% + .02 * var(--demo-h));background:linear-gradient(145deg,#040a12,#01050a 50%,#050a11);border-color:#56657569;padding:8px;transform:translate(-50%,-50%) translateY(calc(var(--slot) * var(--demo-h) * .32)) perspective(1600px) rotateX(12deg) rotateY(-8deg) rotateZ(-.6deg) scale(var(--card-scale,1))}
 .demo25-card .demo25-chrome{height:24px;padding:0 6px 5px;gap:6px}
 .demo25-card .demo25-chrome i{width:7px;height:7px;background:#fc3753}
 .demo25-card .demo25-chrome i:nth-child(2){background:#f9d032}
 .demo25-card .demo25-chrome i:nth-child(3){background:#00c4a5}
 .demo25-card .demo25-address{font-size:7px;opacity:.55}
}
@media(max-width:700px) and (max-height:650px){
 .demo25-card{top:66%;transform:translate(-50%,-50%) translateY(calc(var(--slot) * var(--demo-h) * .196)) perspective(1600px) rotateY(-7deg) rotateZ(-.8deg) scale(var(--card-scale,1))}
}
@media(min-width:701px) and (max-height:600px){
 .demo25-selector{top:52%;--selector-track:clamp(124px,26svh,156px)}
}
@media(prefers-reduced-motion:reduce){
 .demo25{height:var(--demo-h)!important}.demo25-stage{position:relative}
 .demo25-card,.demo25-category{transition:opacity .12s linear}
 .demo25-hint-inner{animation:none;opacity:1}
 .demo25-field{transition:none}
}
@media(prefers-reduced-motion:reduce) and (min-width:701px){
 .demo25{height:var(--demo-extent,var(--demo-h))!important}
}
/* V15: horizontal mobile projects. Vertical input belongs to the portfolio. */
@media(max-width:700px){
 .demo25-stack{overflow:hidden;clip-path:none;pointer-events:none}
 .demo25-card,.demo25-card[data-active=true],.demo25-card:not([data-active=true]){top:49%;width:min(84vw,calc(var(--demo-h) * .55));transform:translate(-50%,-50%) translateX(calc(var(--slot) * min(84vw, var(--demo-h) * .55) * .90)) perspective(1600px) rotateY(-7deg) rotateZ(-.8deg) scale(var(--card-scale,1));touch-action:pan-y;pointer-events:var(--demo-interaction,auto)}
 .demo25-selector{display:grid;left:5%;width:90%;top:70%;height:60px;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;z-index:5;opacity:var(--art);pointer-events:var(--demo-interaction,auto)}
 .demo25-direction{display:contents}.demo25-direction:before{display:none}
 .demo25-arrow{grid-row:1;grid-column:1;display:grid;place-items:center;width:44px;height:44px;margin:0;color:#fff6e8;border:1px solid #a6bdbd77;border-radius:50%;background:#0005}
 .demo25-arrow:last-child{grid-column:3;margin:0}
 .demo25-arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.3;transform:rotate(-90deg)}
 .demo25-categories{grid-column:2;grid-row:1;height:60px}
 .demo25-category{inset:0;justify-content:center;text-align:center;white-space:normal;font:400 clamp(23px,6.5vw,31px)/1.06 'Times New Roman',Times,serif;letter-spacing:-.025em;transform:none}
 .demo25-category:before{display:none}
 .demo25-category:not([aria-current=true]){pointer-events:none}
 .demo25-explore{display:none}
 .demo25-hint{top:calc(70% + 77px);padding:0 20px;font-size:11px;line-height:1.4;text-align:center;z-index:5}
 .demo25-hint span:first-child{font:300 11px/1.4 'Helvetica Neue Local',Arial,sans-serif}
}
/* Approved V16 mobile plaque: flat black, hairline gold, vector ornaments. */
@media(max-width:700px){
 .demo25-selector{left:50%;width:min(340px,calc(100% - 4px));transform:translateX(-50%);grid-template-columns:44px minmax(0,1fr) 44px;column-gap:clamp(4px,1.3vw,8px)}
 .demo25-arrow{position:relative;border:0;border-radius:0;background:none;color:#f8f3df}
 .demo25-arrow .demo25-control-frame{display:block;position:absolute;inset:3px;width:38px;height:38px;transform:none;color:#decf8b;overflow:visible;fill:none;stroke:none}
 .demo25-arrow>svg:not(.demo25-control-frame){position:relative;z-index:1;width:17px;height:17px;stroke-width:2.6}
 .demo25-categories{height:44px;position:relative}
 .demo25-plaque{display:block;position:absolute;left:0;top:-3px;width:100%;height:50px;color:#decf8b;overflow:visible}
 .demo25-category{z-index:1;padding:0 14px;font:400 18px/1.05 'Times New Roman',Times,serif;letter-spacing:-.025em;white-space:nowrap}
 .demo25-arrow:active{filter:brightness(1.3)}
}
@media(max-width:350px){.demo25-selector{column-gap:4px}}
/* Editorial mobile selector: the label and three stable project indicators. */
.demo25-pagination{display:none}
@media(max-width:700px){
 .demo25-selector{width:calc(100% - 32px);max-width:380px;height:auto;display:flex;flex-direction:column;gap:0}
 .demo25-direction,.demo25-plaque{display:none}
 .demo25-categories{width:100%;height:37px}
 .demo25-category{padding:0 4px;font:400 clamp(23px,6.5vw,29px)/1.12 'Times New Roman',Times,serif;letter-spacing:-.025em;white-space:normal;color:#fff6e8}
 .demo25-pagination{display:flex;align-items:center;justify-content:center;gap:4px}
 .demo25-pagination button{display:grid;place-items:center;width:44px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
 .demo25-pagination span{display:block;width:24px;height:2px;border-radius:2px;background:#66758380;transition:background .2s,box-shadow .2s}
 .demo25-pagination button[aria-current=true] span{background:#4ee3fa;box-shadow:0 0 7px #20ccef45}
 .demo25-pagination button:focus-visible{outline:1px solid #4ee3fa;outline-offset:-2px;border-radius:4px}
}
@media(prefers-reduced-motion:reduce){.demo25-pagination span{transition:none}}
