/* A presentation follows the viewport; content stays readable and operable. */
html[data-preview=true]{--header:clamp(56px,8svh,80px);--footer:clamp(48px,7svh,64px)}
#website{height:100svh;display:grid;grid-template-rows:var(--header) minmax(0,1fr) var(--footer)}
#website>.header{height:100%;min-height:0}
#website>.footer{height:100%;min-height:0;padding:0 var(--gutter);flex-wrap:nowrap}
#website>.slide{height:100%;min-height:0;padding:clamp(12px,2.6svh,28px) var(--gutter) 32px;overflow:visible;container-type:size}
.section-caption{bottom:10px;font-size:8px}
.hero-content,.slide-home .hero-content{margin-top:0}
.hero-rule{margin-bottom:clamp(8px,2cqh,20px)}
.hero-content .eyebrow{margin-bottom:clamp(8px,2cqh,16px)}
html[data-preview=true] .hero-content h1{font-size:clamp(32px,min(6.3vw,13cqh),94px);line-height:1.03}
.hero-content .lead{font-size:clamp(13px,2.6cqh,16px);margin-top:clamp(10px,2.4cqh,22px);max-width:390px}
.slide-home .actions{margin-top:clamp(12px,3cqh,26px);gap:8px 20px}
.action{min-height:44px;padding:10px 18px}
.slide-home .action.primary{min-width:190px;padding:11px 20px}
/* Original and all three scene layers use one complete, unzoomed image. */
.art img,.art[data-presentation-scenes] .presentation-motion-stage>img.presentation-motion-layer{object-fit:contain;object-position:right center;animation:none!important;transform:none!important;translate:none}
.art::after{display:none}
.portfolio-row{grid-template-columns:minmax(0,1fr) 52px;gap:14px;padding:12px 0}
.portfolio-detail,.aags-detail{min-width:0;width:100%}
.portfolio-summary,.aags-summary{list-style:none;display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:18px;min-height:44px;cursor:pointer}
.portfolio-summary::-webkit-details-marker,.aags-summary::-webkit-details-marker{display:none}
.portfolio-summary::marker,.aags-summary::marker{content:''}
.portfolio-summary h2{font-size:clamp(19px,2vw,29px)}
.portfolio-detail>p{margin:2px 0 0 43px;font-size:12px;line-height:1.5}
.portfolio-index{align-self:center;padding-top:0}
.brief-portfolio{gap:clamp(25px,5vw,80px)}
html[data-preview=true] .brief-intro h1{font-size:clamp(30px,min(4.5vw,11cqh),68px)}
.contact-layout-brief{max-height:100%}
html[data-preview=true] .brief-contact h1{font-size:clamp(32px,min(6vw,12cqh),86px)}
.contact-person{margin-top:clamp(10px,2.4cqh,24px)}
.brief-email{font-size:clamp(21px,min(3.5vw,6.5cqh),48px);margin-top:8px}
.brief-phones{margin-top:clamp(8px,2cqh,20px);gap:8px 28px}
.brief-contact-links{margin-top:clamp(4px,1.6cqh,16px)}
.contact-form-entry{margin-top:8px}
.contact-form-close{display:none;min-height:44px;margin:0 0 8px auto;padding:0 4px;color:var(--accent);font-size:12px}
.contact-form-close:focus-visible{outline:2px solid var(--cyan)}
.contact-form-is-open .contact-layout-brief{max-height:100%;gap:28px}
.contact-form-panel{padding:18px}
.contact-request-form{gap:8px}
.contact-request-form textarea{min-height:76px}
/* Public research keeps its five questions in the same screen. */
#website>.slide-aags{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr) auto;align-content:center;align-items:center;gap:18px 40px}
.aags-intro{margin:0;max-width:none}
.aags-intro h1{font-size:clamp(32px,min(4.7vw,10cqh),65px)}
.aags-intro .lead{font-size:14px;line-height:1.6;margin-top:16px}
.aags-framework{font-size:10px;margin-top:12px}
.aags-intro .actions{margin-top:18px}
.aags-questions{gap:18px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.aags-question{display:block;padding-top:8px}
.aags-summary{grid-template-columns:22px minmax(0,1fr);gap:10px}
.aags-question-index{padding:0;align-self:center}
.aags-question h2{font-size:clamp(18px,1.8vw,25px)}
.aags-question p{font-size:13px;line-height:1.5;margin:6px 0 0 32px}
.aags-note{grid-column:1/-1;margin:0;font-size:11px;line-height:1.5}
@media(max-width:900px),(max-height:760px){
 .portfolio-row{padding:2px 0;gap:10px}
 .portfolio-summary,.aags-summary{position:relative;padding-right:20px}
 .portfolio-summary::after,.aags-summary::after{content:'+';position:absolute;right:0;top:50%;translate:0 -50%;font-size:17px;color:var(--accent)}
 details[open]>.portfolio-summary::after,details[open]>.aags-summary::after{content:'−'}
 .portfolio-detail>p{margin:0 20px 8px 43px}
 .aags-questions{display:block}
 .aags-question{padding:0;border-top:1px solid var(--line)}
 .aags-question:last-child{max-width:none}
 .aags-question p{margin:0 18px 8px 32px}
 .aags-summary h2{font-size:17px;line-height:1.25}
}
@media(max-width:900px){
 html[data-preview=true]{--header:64px;--footer:52px}
 .signature-line{display:none}.footer>.slide-controls{margin-left:0}.footer>.footer-tools{min-width:0}
 .brief-portfolio{grid-template-columns:1fr;gap:16px}
 html[data-preview=true] .brief-intro h1{font-size:clamp(28px,min(6vw,9cqh),56px)}
 .brief-intro .eyebrow{margin-bottom:10px}
 .portfolio-summary h2{font-size:clamp(17px,2.7vw,23px)}
 .portfolio-summary{min-height:48px}
 .portfolio-detail>p{font-size:13px}
 /* A separate art zone gives the diamond an intact silhouette on portrait screens.
    Only empty scenery is outside this crop; normalized diamond x=.627–.945/y=.08–.78 remains inside. */
 #website>.slide-home{display:grid;grid-template-rows:minmax(0,1fr) minmax(120px,37%);grid-template-columns:1fr;gap:0;padding-bottom:24px}
 .slide-home .hero-content{grid-column:1;grid-row:1;align-self:center;max-width:none}
 .slide-home .art{position:relative;inset:auto;grid-column:1;grid-row:2;z-index:0;width:100%;height:100%;overflow:hidden}
 .slide-home .art img,.slide-home .art[data-presentation-scenes] .presentation-motion-stage>img.presentation-motion-layer{width:auto;height:128%;max-width:none;position:absolute;top:-8%;left:50%;right:auto;translate:-78.6% 0;object-fit:contain;object-position:center;opacity:1}
 .slide-home .art[data-presentation-scenes] .presentation-motion-stage{opacity:1}
 .slide-home .art-shade{background:linear-gradient(0deg,var(--bg),transparent 16%,transparent 86%,var(--bg)),linear-gradient(90deg,var(--bg),transparent 15%,transparent 85%,var(--bg))}
 .slide-home .art-light{display:none}
 .slide-home .art[data-presentation-scenes] .presentation-motion-stage::after{background:none}
 html[data-preview=true] .hero-content h1{font-size:clamp(28px,min(7.8vw,9.6cqh),60px)}
 .hero-content .lead{max-width:540px;font-size:14px;line-height:1.5;margin-top:12px}
 .slide-home .hero-rule{display:none}
 .slide-home .hero-content .eyebrow{margin-bottom:10px}
 .slide-home .actions{margin-top:14px;gap:6px 18px}
 .slide-home .action{font-size:12px}
 #website>.slide-aags{gap:12px 24px}
 .aags-intro h1{font-size:clamp(28px,4.5vw,45px)}
 .aags-intro .lead{font-size:13px;margin-top:10px}
 .aags-intro .eyebrow{margin-bottom:10px}
 .aags-intro .actions{margin-top:12px}
 .aags-summary{min-height:48px}
 .contact-form-is-open .brief-contact{visibility:hidden;pointer-events:none}
 .contact-form-is-open .contact-layout-brief{display:block}
 .contact-form-is-open .contact-form-panel{position:fixed;z-index:30;inset:calc(var(--header) + 8px) var(--gutter) calc(var(--footer) + 8px);width:auto;max-width:560px;max-height:none;overflow:auto;margin:auto;background:var(--bg);overscroll-behavior:contain}
 .contact-form-close{display:block}
}
@media(max-width:620px){
 html[data-preview=true]{--header:56px;--footer:48px;--gutter:20px}
 #website>.slide{padding-top:12px;padding-bottom:24px}
 .section-caption{bottom:7px;font-size:7px}
 .header-tools,.brand{gap:6px}.brand{font-size:11px}.brand-mark{font-size:22px}
 .language-select{width:46px;max-width:46px}.language-code{font-size:13px}
 .motion-button{font-size:9px}.slide-controls{gap:4px}.slide-arrow{width:28px}
 .slide-home .hero-content .eyebrow{font-size:7px;letter-spacing:.13em;margin-bottom:8px}
 html[data-preview=true] .hero-content h1{font-size:clamp(25px,min(9.4vw,9.2cqh),42px)}
 .hero-content .lead{font-size:13px;max-width:none;margin-top:10px;line-height:1.45}
 .slide-home .actions{gap:4px 16px;margin-top:10px}
 .slide-home .action{font-size:11px;min-height:42px}
 .slide-home .action.primary{min-width:0;padding:9px 14px;gap:14px}
 .slide-home .action.text-action{min-height:36px;gap:12px}
 .brief-portfolio{gap:10px}
 .brief-intro .eyebrow{font-size:8px;margin-bottom:6px}
 html[data-preview=true] .brief-intro h1{font-size:clamp(26px,min(8vw,8cqh),38px);line-height:1.06}
 .portfolio-summary{grid-template-columns:18px minmax(0,1fr);gap:8px;min-height:46px}
 .portfolio-summary h2{font-size:17px;line-height:1.25}
 .portfolio-detail>p{margin-left:26px;font-size:12px;line-height:1.45}
 .portfolio-row{grid-template-columns:minmax(0,1fr) 42px}
 .portfolio-aags-link{font-size:9px;gap:4px}
 html[data-preview=true] .brief-contact h1{font-size:clamp(29px,min(9vw,10cqh),44px);line-height:1.05}
 .brief-contact .eyebrow{margin-bottom:10px;font-size:8px}
 .slide-contact .contact-person{margin-top:12px;font-size:12px}
 .slide-contact .brief-email{font-size:clamp(17px,5.3vw,27px);margin-top:6px;padding-bottom:5px}
 .slide-contact .brief-phones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
 .brief-phones a{font-size:clamp(12px,3.55vw,17px);gap:6px;min-height:40px}
 .brief-phones a>span{font-size:8px}
 .brief-contact-links{gap:10px 24px;font-size:11px}
 .brief-contact-links a{min-height:40px}
 .contact-form-entry{margin-top:8px}
 .contact-form-open{font-size:11px;min-height:44px}
 #website>.slide-aags{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
 .aags-intro h1{font-size:clamp(24px,min(7.5vw,7.5cqh),36px);line-height:1.05}
 .aags-intro .eyebrow{font-size:8px;margin-bottom:6px}
 .aags-intro .lead{font-size:12px;line-height:1.45;margin-top:8px}
 .aags-framework{font-size:9px;line-height:1.4;margin-top:7px}
 .aags-intro .actions{margin-top:9px}
 .aags-intro .action{font-size:10px;min-height:40px;padding:8px 13px}
 .aags-summary{min-height:36px;grid-template-columns:18px minmax(0,1fr);gap:8px}
 .aags-summary h2{font-size:15px;line-height:1.2}
 .aags-question p{font-size:12px;line-height:1.4;margin:0 16px 6px 26px}
 .aags-note{font-size:10px;line-height:1.4;padding-left:9px}
 .contact-form-panel{padding:12px}.contact-request-form{gap:6px}
 .contact-request-form textarea{min-height:68px}
 .contact-form-privacy{line-height:1.4}
}
/* Very short / landscape windows favour readable controls. Panels retain a local
   scroll escape for keyboard, large text, validation errors and challenge UI. */
@media(max-height:640px){
 #website>.slide{padding-top:8px;padding-bottom:20px}
 .hero-content .eyebrow{font-size:7px;margin-bottom:5px}
 html[data-preview=true] .hero-content h1{font-size:clamp(24px,min(5vw,9cqh),38px)}
 .hero-content .lead{font-size:12px;margin-top:7px;line-height:1.4}
 .slide-home .actions{margin-top:8px}
 .portfolio-summary{min-height:40px}
 .portfolio-summary h2{font-size:16px}
 .brief-intro h1{font-size:28px}
 .brief-contact-links{margin-top:4px}
 .contact-person{margin-top:8px}
}
@media(max-width:900px) and (max-height:500px){
 #website>.slide-home{grid-template-columns:1.15fr .85fr;grid-template-rows:1fr;gap:16px}
 .slide-home .hero-content{grid-row:1;grid-column:1}
 .slide-home .art{grid-row:1;grid-column:2;max-height:100%}
 .slide-home .art img,.slide-home .art[data-presentation-scenes] .presentation-motion-stage>img.presentation-motion-layer{height:min(128%,36vw)}
 .slide-home .actions{gap:4px 14px}
 .slide-home .action{font-size:10px;min-height:36px}
 .slide-home .action.primary{min-width:0}
 #website>.slide-aags{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
 .aags-intro h1{font-size:24px}.aags-intro .lead{font-size:11px}.aags-summary{min-height:30px}.aags-summary h2{font-size:13px}.aags-question p{font-size:11px}.aags-note{font-size:9px}
}
@media print{#website{display:block;height:auto}#website>.slide{height:auto;container-type:normal;overflow:visible}details>summary{list-style:none}details>p{display:block!important}.contact-form-close{display:none}}
@media(max-width:620px) and (max-height:680px){
 #website>.slide-aags{gap:6px;padding-top:8px;padding-bottom:24px}
 .aags-intro h1{font-size:24px}
 .aags-intro .lead{line-height:1.35;margin-top:6px}
 .aags-framework{margin-top:5px;line-height:1.3}
 .aags-intro .actions{margin-top:6px}
 .aags-intro .action{min-height:36px}
 .aags-summary{min-height:32px}
 .aags-question p{margin-bottom:4px}
}
.portfolio-contact-action{margin-top:22px}
.portfolio-contact-action .action{max-width:100%}
@media(max-width:900px){.portfolio-contact-action{margin-top:10px}.portfolio-contact-action .action{font-size:12px;min-height:44px;padding:9px 15px}}
@media(max-width:620px){
 .portfolio-contact-action{margin-top:8px}
 .portfolio-contact-action .action{font-size:11px;min-height:40px;padding:8px 13px}
 html[data-preview=true] .hero-content h1{font-size:clamp(25px,min(9vw,9cqh),40px)}
 .portfolio-summary h2{font-size:16px}
 .portfolio-summary{min-height:42px}
}
@media(max-height:500px){
 html[data-preview=true]{--header:48px;--footer:44px}
 #website>.slide{padding-top:6px;padding-bottom:16px}
 .section-caption{bottom:3px;font-size:6px}
 .hero-content .eyebrow{display:none}
 .slide-home .actions{margin-top:6px}
 .slide-home .action{min-height:34px}
 .brief-portfolio{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px}
 .portfolio-summary{min-height:30px;grid-template-columns:14px minmax(0,1fr);gap:6px}
 .portfolio-summary h2{font-size:13px;line-height:1.2}
 .portfolio-detail>p{font-size:11px;line-height:1.35;margin-left:20px;margin-bottom:3px}
 .portfolio-row{padding:0;gap:6px;grid-template-columns:minmax(0,1fr) 36px}
 .portfolio-aags-link{font-size:8px;gap:3px}
 .portfolio-contact-action{margin-top:8px}
 .portfolio-contact-action .action{font-size:10px;min-height:36px;padding:7px 12px}
 .brief-contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:20px;align-items:start}
 .brief-contact>.eyebrow{grid-column:1;grid-row:1;margin-bottom:4px}
 .brief-contact>h1{grid-column:1;grid-row:2/span 4}
 .brief-contact>.contact-person{grid-column:2;grid-row:1;margin:0}
 .brief-contact>.brief-email{grid-column:2;grid-row:2;font-size:18px;margin:3px 0}
 .brief-contact>.brief-phones{grid-column:2;grid-row:3;margin:0;gap:6px}
 .brief-contact>.brief-phones a{font-size:12px;min-height:32px}
 .brief-contact>.brief-contact-links{grid-column:2;grid-row:4;margin:0;font-size:10px;gap:6px 12px}
 .brief-contact>.brief-contact-links a{min-height:32px}
 .brief-contact>.contact-form-entry{grid-column:2;grid-row:5;margin:3px 0 0}
 .contact-form-open{min-height:36px;padding:7px 12px;font-size:10px}
 .aags-intro h1{font-size:22px}
 .aags-intro .actions{margin-top:6px}
 .aags-intro .action{font-size:10px;min-height:36px;padding:7px 12px}
 .aags-intro .lead{font-size:11px;line-height:1.35;margin-top:6px}
 .aags-framework{font-size:9px;line-height:1.3;margin-top:4px}
}
@media(max-width:900px),(max-height:760px){.slide-portfolio .portfolio-row{padding:2px 0}}
@media(max-width:620px) and (min-height:681px){.portfolio-summary h2{font-size:17px}.portfolio-summary{min-height:46px}html[data-preview=true] .hero-content h1{font-size:clamp(28px,min(9.4vw,9.2cqh),42px)}}
@media(max-height:500px){
 .slide-portfolio .portfolio-row{padding:0}
 .aags-summary{min-height:26px}
 .aags-summary h2{font-size:13px}
 .aags-question p{font-size:11px;line-height:1.3;margin-bottom:3px}
 .aags-note{font-size:9px;line-height:1.3}
}
/* The form follows the visible viewport, including narrow / short previews and
   an on-screen keyboard. Only this panel scrolls; the page stays in its frame. */
.contact-request-form>label,.contact-form-privacy,.contact-form-status,.contact-form-error{min-width:0;max-width:100%;overflow-wrap:anywhere}
.contact-turnstile iframe{max-width:100%}
@media(max-width:900px),(max-height:640px){
 .contact-form-is-open .brief-contact{visibility:hidden;pointer-events:none}
 .contact-form-is-open .contact-layout-brief{display:block}
 .contact-form-is-open .contact-form-panel{position:fixed;z-index:30;inset:auto var(--gutter);top:var(--contact-panel-top,calc(var(--header) + 8px));height:var(--contact-panel-height,calc(100dvh - var(--header) - var(--footer) - 16px));max-height:var(--contact-panel-height,calc(100dvh - var(--header) - var(--footer) - 16px));width:auto;min-width:0;max-width:min(560px,calc(100% - var(--gutter)*2));margin:0 auto;overflow:auto;background:var(--bg);overscroll-behavior:contain;scroll-padding:56px 0 16px;-webkit-overflow-scrolling:touch}
 .contact-form-close{display:block;position:sticky;top:0;z-index:2;background:var(--bg);box-shadow:0 -12px 0 12px var(--bg);margin-bottom:8px}
}
@media(max-width:900px),(max-height:640px){
 /* The inactive contact card stays measured for text transitions, but cannot
    widen the page while its replacement form is open. */
 .contact-form-is-open .brief-contact{overflow:clip}
}
/* Feather the surrounding scenery in the source image's coordinates. The
   diamond's four corners stay inside the opaque centre of the mask, while the
   rectangular right edge and floor dissolve into the shared navy background.
   Every scene gets the same mask so crossfades retain one silhouette. */
@media(max-width:900px){
 .slide-home .art img,.slide-home .art[data-presentation-scenes] .presentation-motion-stage>img.presentation-motion-layer{
  -webkit-mask-image:radial-gradient(ellipse 21.4% 65% at 78.6% 43%,#000 74%,#000e 80%,#0006 92%,#0000 100%);
  mask-image:radial-gradient(ellipse 21.4% 65% at 78.6% 43%,#000 74%,#000e 80%,#0006 92%,#0000 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 }
}
@media(max-width:900px){
 .slide-home .art{background:var(--bg)}
 .slide-home .art[data-presentation-scenes] .presentation-motion-stage,
 .slide-home .art:not([data-presentation-scenes])>img{mix-blend-mode:lighten}
}
/* Keep the small context label aligned with the stationary presentation title
   during the first paint and SPA entry, rather than sliding over its first line. */
.presentation-motion-ready .eyebrow{animation:none!important}

/* A compact contact card and a wider form share the desktop frame. The form
   has its own height limit for validation or an interactive security challenge. */
@media(min-width:901px) and (min-height:641px){
 .contact-form-is-open .contact-layout-brief{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;width:min(1120px,calc(100vw - 160px));max-width:100%;min-height:0;margin-inline:0}
 .contact-form-is-open .brief-contact{visibility:visible;pointer-events:auto;overflow:visible}
 html[data-preview=true] .contact-form-is-open .brief-contact h1{font-size:clamp(30px,4.2vw,48px);line-height:1.08;letter-spacing:-.055em}
 .contact-form-is-open .brief-contact .eyebrow{font-size:9px;margin-bottom:12px}
 .contact-form-is-open .contact-person{font-size:13px;margin-top:14px}
 .contact-form-is-open .brief-email{font-size:clamp(18px,2.15vw,28px);gap:12px;margin-top:6px;line-height:1.4}
 .contact-form-is-open .brief-phones{gap:4px 18px;margin-top:12px}
 .contact-form-is-open .brief-phones a{font-size:15px;gap:8px;min-height:36px}
 .contact-form-is-open .brief-contact-links{font-size:11px;gap:18px;margin-top:8px}
 .contact-form-is-open .brief-contact-links a{min-height:36px}
 .contact-form-is-open .contact-form-entry{margin-top:8px}
 .contact-form-is-open .contact-form-open{font-size:11px;min-height:40px;padding:8px 14px}
 .contact-form-is-open .contact-form-panel{position:relative;inset:auto;width:100%;max-width:520px;height:auto;max-height:calc(100svh - var(--header) - var(--footer) - 72px);min-height:0;padding:16px;overflow:auto;overscroll-behavior:contain;scroll-padding:44px 0 14px;background:var(--bg);margin:0}
 .contact-form-is-open .contact-form-close{display:block;position:sticky;top:0;z-index:2;min-height:32px;margin:0 0 6px auto;padding:0 4px;background:var(--bg);box-shadow:0 -10px 0 10px var(--bg)}
 .contact-form-is-open .contact-request-form{gap:7px}
 .contact-form-is-open .contact-request-form>label{font-size:12px;line-height:1.4}
 .contact-form-is-open .contact-request-form input{min-height:42px;padding:8px 10px}
 .contact-form-is-open .contact-request-form textarea{height:76px;min-height:76px;padding:8px 10px}
 .contact-form-is-open .contact-form-privacy{font-size:11px;line-height:1.4}
 .contact-form-is-open .contact-form-submit{min-height:40px;padding:8px 16px;margin-top:2px}
}
