/* AD-VISE bespoke Websites page. Shared brand, typography and navigation retained. */
.website-craft{padding:90px 0 40px}
.craft-layout{display:grid;grid-template-columns:1fr 1.03fr;gap:clamp(40px,7vw,120px);border-top:1px solid #365056;padding-top:66px}
.website-craft h2{font-size:clamp(40px,4.4vw,68px);letter-spacing:-.05em;line-height:1.08}
.craft-signoff{border-left:2px solid var(--teal);padding-left:20px;font-size:14px;line-height:1.7;color:#afc5ca;margin-top:34px}
.craft-copy>p{font-size:16px;line-height:1.85;color:#b9cbcf;margin:0 0 22px}
.craft-copy>.craft-statement{font-size:clamp(23px,2.2vw,32px);line-height:1.4;letter-spacing:-.025em;color:#eff6f6;margin-bottom:28px}
.craft-detail{display:grid;grid-template-columns:145px 1fr;gap:15px 20px;border-top:1px solid #334a50;padding-top:26px;margin-top:32px;align-items:baseline}
.craft-detail span{font-size:10px;letter-spacing:.13em;color:#65d7df}
.craft-detail p{font-size:14px;margin:0;color:#d5e0e3}
.website-process{padding-top:105px;padding-bottom:100px}
.process-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:50px;align-items:end;margin-bottom:38px}
.process-heading .eyebrow{grid-column:1/-1}
.process-heading>p:last-child{font-size:16px;line-height:1.8;color:#a9c1c7;max-width:360px;justify-self:end;margin:0 0 22px}
.process-list{padding:0;margin:0;list-style:none}
.process-list li{display:grid;grid-template-columns:55px 1fr 1.6fr 1fr;gap:25px;align-items:baseline;border-top:1px solid #345059;padding:29px 0}
.process-list li:last-child{border-bottom:1px solid #345059}
.process-no{font-size:12px;color:#55d3de;font-variant-numeric:tabular-nums}
.process-list h3{font-weight:500;font-size:24px;letter-spacing:-.025em;margin:0}
.process-list p{font-size:14px;line-height:1.8;color:#adc3c8;margin:0;max-width:420px}
.process-detail{font-size:11px;color:#7199a3;text-align:right}
/* An architectural wall of screens: three curved tracks in one 3D space. */
.portfolio{padding:100px 0 0;position:relative;overflow:hidden;scroll-margin-top:20px}
.portfolio-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:46px}
.portfolio-heading .eyebrow{font-size:10px;letter-spacing:.19em;margin-bottom:24px}
.portfolio-heading h2{font-size:clamp(42px,5.1vw,78px);font-weight:500;letter-spacing:-.055em;line-height:1.05;margin:0}
.portfolio-intro{max-width:330px;margin-bottom:5px}
.portfolio-intro p{font-size:15px;color:#c1d0d3;line-height:1.85;margin:0 0 25px}
.portfolio-motion-note{display:flex;align-items:center;gap:12px;text-transform:uppercase;font-size:10px;letter-spacing:.16em;color:#68dce3}
.portfolio-motion-note:after{content:"↘";font-size:23px;line-height:1}
.portfolio-motion-note i{display:none}
.portfolio-gallery{position:relative;isolation:isolate}
/* The page's live harbour remains continuous beneath the floating screens. */
.portfolio-theatre{position:relative;isolation:isolate;background:transparent;border:0;overflow:hidden}
.portfolio-theatre:before,.portfolio-theatre:after{content:none}
.portfolio-theatre-top,.portfolio-theatre-bottom{position:absolute;left:max(32px,calc((100vw - 1280px)/2));right:max(32px,calc((100vw - 1280px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:5;pointer-events:none}
.portfolio-theatre-top{top:25px}.portfolio-theatre-bottom{bottom:20px;color:#b1d5dd;font-size:8px;letter-spacing:.19em}
.portfolio-live-mark{font-size:9px;letter-spacing:.16em;color:#d0e8ed;display:flex;align-items:center;gap:9px}
.portfolio-live-mark i{display:block;width:5px;height:5px;border-radius:50%;background:#68eff3;box-shadow:0 0 10px #68eff399}
.portfolio-theatre-hint{font-size:8px;letter-spacing:.1em;color:#a9c3cb;display:flex;gap:16px;align-items:center}
.portfolio-theatre-hint b{font-weight:400;font-size:22px}
.portfolio-theatre-line{flex:1;height:1px;background:linear-gradient(90deg,#59808b55,transparent)}
.portfolio-pause{border:1px solid #68899466;border-radius:30px;background:#08191fe6;color:#d7e7e9;font:inherit;font-size:10px;letter-spacing:.02em;display:flex;align-items:center;gap:9px;padding:10px 16px;cursor:pointer;pointer-events:auto;min-height:40px}
.portfolio-pause:hover{border-color:#67e4ec;color:white}
.portfolio-pause:disabled{cursor:default;color:#a5bbc4}
.portfolio-viewport{position:relative;perspective:1550px;perspective-origin:50% 48%;overflow:hidden;touch-action:pan-y;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}
.portfolio-stage{position:relative;display:flex;gap:24px;padding:90px 5%;overflow-x:auto;scroll-snap-type:x mandatory}
.portfolio-card{flex:0 0 min(65vw,520px);display:block;color:inherit;text-decoration:none;scroll-snap-align:center}
.portfolio-window{display:block;position:relative;border-radius:7px;overflow:hidden;background:#142128;border:1px solid #a1bdcbaa;box-shadow:0 0 0 1px #0008,0 20px 55px #0007;transition:border-color .2s}
.portfolio-window:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.09),transparent 30%,transparent 65%,rgba(132,224,244,.05));box-shadow:inset 0 0 0 1px #ffffff0d}
.portfolio-window>img{display:block;width:100%;height:auto;aspect-ratio:1.442;object-fit:cover;object-position:top;user-select:none}
.portfolio-chrome{height:21px;display:flex;align-items:center;gap:4px;padding:0 8px;background:linear-gradient(#2e414c,#12242e);border-bottom:1px solid #95c3d033;font-size:7px;letter-spacing:.04em;color:#bed2da}
.portfolio-chrome i{width:3px;height:3px;background:#95a9b5;border-radius:50%}
.portfolio-chrome>span{flex:1;text-align:center;margin-right:12px}.portfolio-chrome b{color:#8fe5ec;font-weight:400}
.portfolio-static-caption{display:flex;justify-content:space-between;padding:14px 0;font-size:13px}
.portfolio-ghost{display:none}
.portfolio-ready .portfolio-viewport{height:clamp(620px,55vw,820px);cursor:grab}
.portfolio-ready .portfolio-stage{position:absolute;inset:0;display:block;padding:0;overflow:visible;transform-style:preserve-3d;will-change:transform}
.portfolio-ready .portfolio-card,.portfolio-ready .portfolio-ghost{position:absolute;display:block;top:50%;left:50%;width:var(--screen-width,470px);margin-left:calc(var(--screen-width,470px)/-2);margin-top:calc(var(--screen-height,347px)/-2);transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;user-select:none;cursor:pointer}
.portfolio-ready .portfolio-static-caption{display:none}
.portfolio-ready .portfolio-ghost .portfolio-window{box-shadow:0 15px 45px #0009}
.portfolio-ready .portfolio-ghost .portfolio-window:before{content:"";position:absolute;inset:0;background:rgba(3,13,18,.26);z-index:1;pointer-events:none}
.portfolio-viewport.is-dragging,.portfolio-viewport.is-dragging *{cursor:grabbing!important}
.portfolio-card:hover .portfolio-window,.portfolio-ghost:hover .portfolio-window{border-color:#86f1f5;box-shadow:0 0 0 1px #5ee7ed99,0 20px 55px #0008}
.portfolio-card:focus-visible{outline:2px solid #79f4f5;outline-offset:6px;border-radius:7px}
.portfolio-feature{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;padding-top:32px;padding-bottom:23px}
.portfolio-focus-label{font-size:8px;letter-spacing:.22em;color:#5bc8d3;display:block;margin-bottom:12px}
.portfolio-category{font-size:11px;letter-spacing:.03em;color:#91b5be;margin:0 0 6px}
.portfolio-project-heading h3{font-size:clamp(20px,2.3vw,31px);font-weight:500;letter-spacing:-.04em;margin:0;line-height:1.15}
.portfolio-feature-nav{display:flex;gap:18px;align-items:center}
.portfolio-arrow{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font:22px inherit;color:#c3e2e8;background:#08191e99;border:1px solid #5b889566;cursor:pointer}
.portfolio-arrow:hover{background:#164550;border-color:#56cddc;color:white}
.portfolio-position{display:flex;gap:9px;align-items:baseline;font-size:10px;color:#72949f;font-variant-numeric:tabular-nums}
.portfolio-position b{font-size:16px;color:#d9edef;font-weight:400}
.portfolio-project-actions{display:flex;align-items:center;justify-content:flex-end;gap:25px}
.portfolio-inspect{font:inherit;font-size:11px;border:0;border-bottom:1px solid #5e8f9b;background:none;color:#d3e8ed;cursor:pointer;padding:11px 0;display:flex;align-items:center;gap:16px;white-space:nowrap}
.portfolio-inspect:hover{color:#59e3ed;border-color:#59e3ed}
.portfolio-inspect span{font-size:17px;font-weight:300}.portfolio-visit{white-space:nowrap;min-width:160px;font-size:12px}
.portfolio-timing{display:flex;align-items:center;gap:30px;padding-bottom:28px}
.portfolio-progress{height:1px;flex:1;background:#294850;overflow:hidden}
.portfolio-progress span{display:block;height:100%;width:calc(100%/11);background:#22cad9;transform:translateX(calc(var(--progress,0)*1000%))}
.portfolio-collection-count{font-size:10px;color:#789da7;letter-spacing:.025em}
.portfolio-bottom{padding-top:26px;position:relative}
.portfolio-directory-heading{display:flex;justify-content:space-between;gap:25px;align-items:baseline;border-top:1px solid #3c616b66;padding:25px 0 15px}
.portfolio-directory-heading h3{font-size:24px;font-weight:500;letter-spacing:-.035em;margin:0}
.portfolio-directory-heading p{font-size:12px;color:#9bbac3;margin:0}
.portfolio-directory{display:grid;grid-template-columns:repeat(3,1fr);column-gap:35px}
.portfolio-directory a{display:flex;align-items:center;gap:13px;min-height:56px;border-bottom:1px solid #304e57;text-decoration:none;color:#d2e0e3;font-size:12px;transition:color .2s}
.portfolio-directory a>span{font-size:10px;color:#668994;font-variant-numeric:tabular-nums}
.portfolio-directory a>b{font-weight:400;font-size:17px;margin-left:auto;color:#79cdd7;padding-left:10px}
.portfolio-directory a:hover{color:#30d8e4}
.portfolio-invitation{border-top:1px solid #3c616b66;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:45px;padding:35px 0 20px}
.portfolio-invitation h3{font-size:29px;letter-spacing:-.04em;font-weight:500;margin:8px 0 12px}
.portfolio-invitation p:not(.eyebrow){font-size:14px;color:#acc2c9;line-height:1.7;margin:0}
.portfolio-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.portfolio-lightbox{padding:0;border:1px solid #9ab8c75c;background:#07141b;color:#edf5f5;width:min(1060px,90vw);max-width:none;max-height:92svh;overflow:auto;border-radius:12px;box-shadow:0 40px 160px #000c;overscroll-behavior:contain}
.portfolio-lightbox::backdrop{background:rgba(0,9,14,.9);backdrop-filter:blur(12px)}
.portfolio-lightbox-shell{padding:25px;transform-origin:center;animation:portfolio-reveal .6s cubic-bezier(.22,1,.36,1) both}
.portfolio-lightbox-header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:22px}
.portfolio-lightbox-header .eyebrow{font-size:8px;letter-spacing:.15em;margin:0 0 9px;color:#7ad9e4}
.portfolio-lightbox-header .eyebrow span{display:inline-block;margin-left:20px;color:#7d9da7}
.portfolio-lightbox-header h2{font-size:33px;font-weight:500;line-height:1.12;letter-spacing:-.04em;margin:0}
.portfolio-lightbox-header [data-preview-category]{font-size:12px;color:#93b0bc;margin:8px 0 0}
.portfolio-lightbox-close{flex:none;background:#17313e;border:1px solid #68818f70;color:#dfeff2;font:26px inherit;width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.portfolio-lightbox-image{border:1px solid #7e9eae80;border-radius:5px;overflow:hidden;background:#12232d}
.portfolio-lightbox-browser{height:27px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:25px;font-size:9px;color:#a8c0cc;background:linear-gradient(#253e4e,#102531)}
.portfolio-lightbox-browser>span:first-child{font-size:5px;letter-spacing:3px}
.portfolio-lightbox-image>img{display:block;width:100%;height:auto;max-height:65svh;object-fit:contain;object-position:top;background:#101e26}
.portfolio-lightbox-actions{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:19px}
.portfolio-lightbox-actions>div{display:flex;gap:12px}
.portfolio-lightbox-actions .button{min-height:46px;font-size:12px}
@keyframes portfolio-reveal{from{opacity:.3;transform:translate(var(--preview-x,0px),var(--preview-y,40px)) scale(var(--preview-scale,.85))}to{opacity:1;transform:translate(0,0) scale(1)}}
@media(max-width:1100px){.portfolio-feature{grid-template-columns:1fr auto}.portfolio-project-actions{grid-column:1/-1;justify-content:space-between;border-top:1px solid #38555e;padding-top:18px}.portfolio-project-heading h3{font-size:27px}.portfolio-theatre-hint{display:none}}
@media(max-width:980px){.craft-layout{gap:38px}.craft-detail{grid-template-columns:1fr;gap:8px}.craft-detail p{margin-bottom:13px}.portfolio-heading{gap:30px}.portfolio-intro{max-width:280px}.portfolio-directory{grid-template-columns:repeat(2,1fr)}.process-list li{grid-template-columns:30px 1fr 1.7fr}.process-detail{display:none}.portfolio-lightbox{width:94vw}.portfolio-lightbox-shell{padding:18px}}
@media(max-width:600px){.website-craft{padding:55px 0 10px}.craft-layout{grid-template-columns:1fr;padding-top:40px;gap:30px}.website-craft h2{font-size:43px}.craft-signoff{margin-top:24px}.craft-copy>p{font-size:15px}.craft-copy>.craft-statement{font-size:25px}.craft-detail{grid-template-columns:120px 1fr;gap:15px 10px}.craft-detail span{font-size:9px}.craft-detail p{font-size:12px;line-height:1.6;margin:0}.portfolio{padding-top:65px;scroll-margin-top:0}.portfolio-heading{display:block;margin-bottom:30px}.portfolio-heading h2{font-size:42px;line-height:1.08}.portfolio-heading .eyebrow{font-size:8px;letter-spacing:.16em;margin-bottom:20px}.portfolio-intro{max-width:none;margin-top:22px}.portfolio-intro p{font-size:14px;line-height:1.75;margin-bottom:20px}.portfolio-motion-note{font-size:8px;letter-spacing:.13em}.portfolio-theatre-top,.portfolio-theatre-bottom{left:18px;right:18px;gap:15px}.portfolio-theatre-top{top:18px}.portfolio-live-mark{font-size:7px;letter-spacing:.1em;gap:6px}.portfolio-pause{padding:8px 11px;font-size:9px;min-height:36px}.portfolio-theatre-bottom{bottom:15px;font-size:6px;letter-spacing:.1em}.portfolio-ready .portfolio-viewport{height:580px;perspective:950px}.portfolio-chrome{height:15px;font-size:5px;padding:0 5px;gap:3px}.portfolio-chrome i{width:2px;height:2px}.portfolio-window{border-radius:5px}.portfolio-feature{gap:22px 14px;padding-top:26px;padding-bottom:20px}.portfolio-focus-label{font-size:7px;margin-bottom:10px}.portfolio-category{font-size:9px}.portfolio-project-heading h3{font-size:22px}.portfolio-feature-nav{gap:8px}.portfolio-arrow{width:35px;height:35px}.portfolio-position{gap:6px;font-size:9px}.portfolio-position b{font-size:13px}.portfolio-project-actions{gap:20px}.portfolio-visit{min-width:158px;min-height:47px}.portfolio-inspect{font-size:11px;gap:10px}.portfolio-collection-count{display:none}.portfolio-timing{padding-bottom:15px}.portfolio-bottom{padding-top:22px}.portfolio-directory-heading{display:block;padding:24px 0 12px}.portfolio-directory-heading h3{font-size:24px}.portfolio-directory-heading p{font-size:11px;margin-top:10px}.portfolio-directory{grid-template-columns:1fr}.portfolio-directory a{min-height:49px}.portfolio-invitation{display:block;margin-top:32px}.portfolio-invitation h3{font-size:27px}.portfolio-invitation .conversion-invitation-actions{margin-top:23px}.website-process{padding-top:65px;padding-bottom:60px}.process-heading{display:block;margin-bottom:25px}.process-heading>p:last-child{font-size:14px;margin:20px 0}.process-list li{grid-template-columns:28px 1fr;gap:12px 15px;padding:25px 0}.process-list h3{font-size:24px}.process-list p{grid-column:2;font-size:13px}.portfolio-lightbox{width:94vw;border-radius:8px}.portfolio-lightbox-shell{padding:14px}.portfolio-lightbox-header{gap:10px;padding-bottom:16px}.portfolio-lightbox-header h2{font-size:25px;max-width:240px}.portfolio-lightbox-header .eyebrow{font-size:6px}.portfolio-lightbox-header .eyebrow span{margin-left:10px}.portfolio-lightbox-header [data-preview-category]{font-size:10px}.portfolio-lightbox-close{width:32px;height:32px}.portfolio-lightbox-actions{gap:15px}.portfolio-lightbox-actions .button{font-size:11px;padding-inline:18px}}
@media(prefers-reduced-motion:reduce){.portfolio-lightbox-shell{animation:none}.portfolio-window{transition:none}}