.perspective-photo{position:relative;padding:0 0 13px 13px;min-width:0;margin:0}
.perspective-photo::before{content:"";position:absolute;inset:17px 16px 0 0;border:1px solid var(--accent-edge);background:var(--accent-wash)}
.perspective-photo-frame{position:relative;height:335px;overflow:hidden}
.perspective-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.perspective-photo figcaption{position:relative;display:flex;justify-content:space-between;gap:15px;border:1px solid var(--line);border-top:0;background:var(--surface);padding:18px 22px;font-size:11px;font-weight:550;color:var(--text-strong)}
.perspective-photo figcaption>span:last-child{color:var(--text-muted)}
.service-explorer .explorer-panel{height:622px;min-height:622px;display:flex;flex-direction:column}
.service-explorer .explorer-art{padding:0;height:280px;flex-shrink:0;overflow:hidden}
.service-explorer .explorer-art>img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.service-explorer .explorer-copy{display:flex;flex-direction:column;align-items:start;flex:1;padding:29px 34px 30px}
.service-explorer .explorer-copy h3{font-size:25px}.service-explorer .explorer-copy .link{margin-top:auto}.service-explorer .explorer-copy .chips{margin-bottom:19px}
.auto-advance-controls{display:flex;align-items:center;gap:17px;padding-top:19px;color:var(--text-muted)}
.auto-count{font-size:10px;letter-spacing:.07em;white-space:nowrap;font-variant-numeric:tabular-nums}
.auto-track{display:block;flex:1;height:2px;background:var(--line-strong);overflow:hidden}
.auto-track>span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(var(--auto-progress,0));transform-origin:left}
.auto-toggle{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;line-height:1.4;padding:6px 0 6px 8px;border:0;background:none;color:var(--text-muted);min-width:64px;min-height:32px}
.auto-toggle-icon{display:block;width:10px;height:11px;border-inline:3px solid currentColor}
.auto-toggle[aria-pressed=true] .auto-toggle-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.explorer-tabs button{position:relative}
.service-explorer[data-autoplay] .explorer-tabs button[aria-selected=true]::after{content:"";position:absolute;bottom:0;left:0;height:2px;width:100%;background:var(--accent);transform:scaleX(var(--auto-progress,0));transform-origin:left}
.journey[data-autoplay]>.auto-advance-controls{max-width:360px;margin-left:auto}
.journey[data-autoplay] .journey-tabs button{padding-bottom:12px}
.journey[data-autoplay] .journey-tabs button[aria-selected=true]::after{content:"";position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--accent);transform:scaleX(var(--auto-progress,0));transform-origin:left}
[data-autoplay].tabs-ready [data-panel]:not([hidden]){animation:panel-arrive .42s ease both}
@keyframes panel-arrive{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-arrive{from{opacity:.5}to{opacity:1}}
@media(max-width:1100px){
.service-explorer .explorer-copy{padding:26px}.service-explorer .explorer-copy h3{font-size:23px}.perspective-photo-frame{height:300px}.perspective-photo figcaption{padding:16px;font-size:10px}
}
@media(max-width:800px){.perspective-photo{margin-top:15px}.perspective-photo-frame{height:370px}.perspective-photo figcaption{font-size:12px;padding:20px 23px}
.service-explorer .explorer-panel{display:grid;grid-template-columns:1fr 1fr;height:363px;min-height:363px}
.service-explorer .explorer-art{height:100%;min-height:0;border-bottom:0;border-right:1px solid var(--line)}.service-explorer .explorer-copy{padding:24px}.service-explorer .explorer-copy h3{font-size:22px}
}
@media(max-width:580px){
.perspective-photo-frame{height:265px}.perspective-photo figcaption{font-size:10px;padding:16px 14px;gap:8px}.perspective-photo{padding-left:10px;padding-bottom:10px}
.service-explorer .explorer-panel{display:flex;height:608px;min-height:608px}.service-explorer .explorer-art{height:235px;border-right:0;border-bottom:1px solid var(--line)}.service-explorer .explorer-copy{padding:27px}.service-explorer .explorer-copy h3{font-size:24px}
.auto-advance-controls{gap:12px;padding-top:14px}.auto-count{font-size:9px}.auto-toggle{font-size:10px}.journey[data-autoplay]>.auto-advance-controls{max-width:none}
}
@media(max-width:360px){.service-explorer .explorer-panel{height:645px;min-height:645px}.service-explorer .explorer-copy{padding:24px}}
@media(prefers-reduced-motion:reduce){[data-autoplay].tabs-ready [data-panel]:not([hidden]){animation:none;transition:none}}

/* Shared homepage and Why PIQ orbit; service selection remains manual. */
.orbit--animated{--orbit-radius:133px}
.orbit--animated .orbit-track{position:absolute;inset:0;animation:piq-orbit-turn 38s linear infinite;pointer-events:none}
.orbit-node{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--node-angle)) translateX(var(--orbit-radius))}
.orbit-node .orbit-label-moving{left:0;top:0;white-space:nowrap;animation:piq-orbit-counter 38s linear infinite;transform:translate(-50%,-50%) rotate(calc(-1 * var(--node-angle)));width:max-content}
.orbit-motion-toggle{position:absolute;right:0;bottom:0;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--text-muted);display:grid;place-items:center;font-size:11px;line-height:1;z-index:2}
.orbit--animated.is-paused .orbit-track,.orbit--animated.is-paused .orbit-label-moving,.orbit--animated:hover .orbit-track,.orbit--animated:hover .orbit-label-moving{animation-play-state:paused}
@keyframes piq-orbit-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes piq-orbit-counter{from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--node-angle)))}to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--node-angle) - 360deg))}}
.service-explorer .explorer-tabs button{transition:background .22s,color .22s,padding .22s}
.service-explorer .explorer-tabs button:hover{background:var(--accent-wash);color:var(--accent);padding-left:17px}
.service-explorer .explorer-tabs button>svg{transition:transform .22s,opacity .22s}
.service-explorer .explorer-tabs button:hover>svg{transform:translate(2px,-2px)}
.service-explorer .explorer-art>img{transition:transform .65s var(--ease)}
.service-explorer .explorer-panel:hover .explorer-art>img{transform:scale(1.035)}
.service-explorer.tabs-ready [data-panel]:not([hidden]){animation:panel-arrive .4s ease both}
@media(max-width:800px){.orbit--animated{--orbit-radius:124px}.service-explorer .explorer-tabs button:hover{padding-left:13px}}
@media(max-width:540px){.orbit--animated{--orbit-radius:102px}.orbit-motion-toggle{right:2px;bottom:5px}}
@media(max-width:360px){.orbit--animated{--orbit-radius:89px}.orbit-node .orbit-label-moving{font-size:9px;padding:9px}.orbit-node .orbit-label-moving svg{width:16px;height:16px}}
@media(prefers-reduced-motion:reduce){.orbit--animated .orbit-track,.orbit--animated .orbit-label-moving,.service-explorer.tabs-ready [data-panel]:not([hidden]){animation:none}.orbit-motion-toggle{display:none}.service-explorer .explorer-tabs button,.service-explorer .explorer-tabs button>svg,.service-explorer .explorer-art>img{transition:none}.service-explorer .explorer-panel:hover .explorer-art>img,.service-explorer .explorer-tabs button:hover>svg{transform:none}}
@media(min-width:801px){.service-explorer .explorer-panel{height:auto;min-height:545px}}
@media(min-width:581px) and (max-width:800px){.service-explorer .explorer-panel{height:auto;min-height:363px}}
@media(max-width:580px){.service-explorer .explorer-panel{height:auto;min-height:560px}}
@media(max-width:360px){.service-explorer .explorer-panel{min-height:600px}}

/* Full source scopes and the shared Why PIQ orbit sizing. */
.service-explorer .explorer-copy .explorer-scope{font-size:13px;line-height:1.8;margin-bottom:22px}
.service-explorer .explorer-copy .mini-flow{margin:0 0 16px}
.catalog-copy .catalog-scope{margin:20px 0 0}
@media(max-width:540px){.why-system .piq-orbit{--orbit-radius:90px}}
@media(max-width:360px){.why-system .piq-orbit{--orbit-radius:78px}.why-system .ring-two{width:245px;height:245px}}


/* Open typography, panoramic photography and an inset source-copy panel. */
.folio-hero{padding:43px 0 0;background:var(--surface)}
.folio-heading{margin-bottom:34px}
.folio-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 19px;color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.folio-eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.folio-title{font-size:clamp(44px,5.42vw,78px);font-weight:550;line-height:1.1;letter-spacing:-.055em;color:var(--text-strong);margin:0;max-width:none;text-wrap:initial}
.folio-title>span{display:block}
.folio-showcase{position:relative}
.folio-visual{position:relative;height:390px;isolation:isolate}
.folio-photo-stage{position:absolute;inset:0;overflow:hidden;border-radius:16px;background:#123556}
.folio-photo-panel{position:absolute;inset:0;margin:0!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .95s ease,visibility 0s linear .95s;z-index:0}
.folio-showcase[data-crossfade].tabs-ready .folio-photo-panel[data-panel]{animation:none}
.folio-photo-panel.is-active,.folio-showcase:not(.tabs-ready) .folio-photo-panel:first-child{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s;z-index:1}
.folio-photo{position:absolute;inset:0}
.folio-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}
.folio-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,22,42,.75),rgba(3,22,42,0) 58%)}
.folio-summary{position:absolute;left:0;bottom:-1px;z-index:2;width:47%;padding:28px 34px 2px 0;background:var(--surface);border-top-right-radius:20px}
.folio-description{font-size:14px;line-height:1.85;color:var(--text-muted);margin:0 0 22px;max-width:530px}
.folio-summary .flow-actions{gap:12px;flex-wrap:nowrap}
.folio-summary .btn{font-size:10px;letter-spacing:.035em;border-radius:5px;min-height:46px;padding:13px 18px;gap:12px}
.folio-summary .btn svg{width:17px;height:17px}
.folio-photo-caption{position:absolute;left:calc(47% + 34px);right:28px;bottom:27px;display:flex;justify-content:space-between;align-items:end;gap:22px;text-decoration:none;color:white}
.folio-photo-caption:hover{color:#d2e9ff}
.folio-caption-index{display:block;font:400 10px/1.5 var(--font-sans);letter-spacing:.13em;color:#cedbea;margin-bottom:9px}
.folio-caption-title{display:block;font:500 21px/1.35 var(--font-heading);letter-spacing:-.025em;max-width:350px}
.folio-caption-arrow{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border:1px solid #ffffff85;border-radius:50%;transition:background .2s,transform .2s}
.folio-caption-arrow svg{width:19px;height:19px}
.folio-photo-caption:hover .folio-caption-arrow{background:#ffffff18;transform:translate(2px,-2px)}
.folio-photo-caption:focus-visible{outline-color:#fff;outline-offset:6px}
.folio-navigation{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:28px;margin-top:25px}
.folio-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px}
.folio-tabs button{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 6px;padding:18px 0 13px;color:var(--text-muted);background:none;border:0;text-align:left;line-height:1.4;min-width:0}
.folio-tab-num{grid-column:1;grid-row:1;font-size:9px;letter-spacing:.03em;color:var(--text-faint);font-variant-numeric:tabular-nums}
.folio-tab-label{grid-column:1;grid-row:2;font-size:11px;font-weight:550;letter-spacing:.035em}
.folio-tabs button>svg{grid-column:2;grid-row:2;width:14px;height:14px;opacity:0;transform:translate(-2px,2px);transition:opacity .2s,transform .2s}
.folio-tabs button[aria-selected=true],.folio-tabs button:hover{color:var(--accent)}
.folio-tabs button[aria-selected=true]>svg,.folio-tabs button:hover>svg{opacity:1;transform:none}
.folio-tab-track{position:absolute;top:0;left:0;right:0;height:2px;background:var(--line);overflow:hidden}
.folio-tab-track::after{content:"";display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.folio-tabs button[aria-selected=true] .folio-tab-track{background:var(--accent-edge)}
.folio-tabs button[aria-selected=true] .folio-tab-track::after{transform:scaleX(var(--auto-progress,0))}
.folio-toggle.auto-toggle{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line-strong);border-radius:50%;color:var(--text-strong);background:var(--surface);transition:border-color .2s,background .2s}
.folio-toggle:hover{background:var(--accent-wash);border-color:var(--accent)}
.folio-static-areas{font-size:11px;margin:20px 0 0;line-height:2;letter-spacing:.03em;color:var(--text-muted)}
.folio-showcase:not(.tabs-ready) .folio-photo-panel:not(:first-child){display:none}
@media(max-width:1100px){
.folio-hero{padding-top:34px}.folio-heading{margin-bottom:28px}.folio-title{font-size:5.45vw}
.folio-visual{height:375px}.folio-summary{width:49%;padding-right:28px}.folio-photo-caption{left:calc(49% + 28px);right:24px;bottom:25px}
.folio-caption-title{font-size:19px}.folio-summary .btn{font-size:9px;padding:12px 13px;gap:9px}.folio-description{font-size:13px}
.folio-navigation{gap:20px}.folio-tabs{gap:19px}.folio-tab-label{font-size:10px;letter-spacing:.015em}
}
@media(max-width:800px){
.folio-hero{padding-top:31px}.folio-title{font-size:5.5vw;letter-spacing:-.05em}.folio-eyebrow{font-size:9px;margin-bottom:17px}
.folio-visual{height:355px}.folio-summary{width:51%;padding:23px 23px 2px 0}.folio-description{font-size:12px;margin-bottom:18px}
.folio-summary .flow-actions{gap:8px}.folio-summary .btn{font-size:8px;padding:11px 10px;gap:8px;min-height:44px}.folio-summary .btn svg{width:14px}
.folio-photo-caption{left:calc(51% + 22px);right:22px;bottom:22px;gap:15px}.folio-caption-title{font-size:17px}
.folio-caption-index{font-size:9px}.folio-caption-arrow{width:36px;height:36px}.folio-caption-arrow svg{width:16px;height:16px}
.folio-navigation{gap:18px;margin-top:21px}.folio-tabs{gap:15px}.folio-tab-label{font-size:9px;letter-spacing:0}
.folio-tabs button>svg{display:none}
}
@media(max-width:600px){
.folio-hero{padding-top:29px}.folio-heading{margin-bottom:25px}.folio-eyebrow{font-size:8px;letter-spacing:.1em;margin-bottom:18px;gap:10px}.folio-eyebrow::before{width:20px}
.folio-title{font-size:clamp(30px,8.8vw,49px);line-height:1.13;letter-spacing:-.05em}
.folio-visual{height:auto;padding-top:280px}
.folio-photo-stage{inset:0 0 auto;height:280px;border-radius:12px}
.folio-photo img{object-position:61% 50%}
.folio-photo::after{background:linear-gradient(0deg,rgba(3,22,42,.8),transparent 72%)}
.folio-summary{position:relative;bottom:auto;width:100%;border-radius:0;padding:24px 0 0}
.folio-description{font-size:13px;line-height:1.85;max-width:none;margin-bottom:20px}
.folio-summary .flow-actions{gap:11px}.folio-summary .btn{font-size:9px;padding:13px 14px;gap:10px;min-height:46px}.folio-summary .btn svg{width:16px}
.folio-photo-caption{left:20px;right:20px;bottom:21px;gap:20px}.folio-caption-title{font-size:18px;line-height:1.4;max-width:255px}.folio-caption-index{font-size:9px;margin-bottom:8px}
.folio-caption-arrow{width:38px;height:38px}
.folio-navigation{display:block;margin-top:27px}
.folio-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}
.folio-tabs button{padding:14px 0 6px;gap:7px}.folio-tab-label{font-size:9px}.folio-tab-num{font-size:8px}
.folio-motion{position:absolute;right:0;bottom:6px}
.folio-toggle.auto-toggle{width:38px;height:38px;min-width:38px;min-height:38px}
}
@media(max-width:360px){
.folio-title{font-size:30px}.folio-visual{padding-top:260px}.folio-photo-stage{height:260px}
.folio-caption-title{font-size:16px}.folio-photo-caption{left:17px;right:17px;bottom:18px;gap:13px}
.folio-description{font-size:12px}.folio-summary .flow-actions{gap:9px}.folio-summary .btn{font-size:8px;padding:12px;gap:8px}
.folio-tabs{gap:14px 12px}.folio-tab-label{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
.folio-photo-panel,.folio-caption-arrow,.folio-tabs button>svg,.folio-toggle.auto-toggle{transition:none}
}
