:root{--ink:#1b2928;--paper:#f4f1e9;--muted:#64706b;--line:#c9cec5;--accent:#c2a779}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b98b40;outline-offset:4px}header{height:86px;padding:0 3.5vw;position:sticky;top:0;background:var(--paper);z-index:10;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:18px;font-weight:700;letter-spacing:2px}.brand span{display:block;font-weight:400;font-size:13px;letter-spacing:1px;margin-top:7px}nav{display:flex;align-items:center;gap:8px}nav button,nav a{border:0;background:none;padding:12px;font-size:14px;text-decoration:none}nav button[aria-pressed=true]{background:var(--ink);color:white}.slide{position:relative;min-height:calc(100svh - 86px);padding:5vh 5vw 4vh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}.eyebrow{font-size:13px;letter-spacing:2px;font-weight:600;margin:0 0 20px;line-height:1.5}.slide h1,.slide h2{font:normal clamp(38px,4.3vw,72px)/1.05 Georgia,'Times New Roman',serif;letter-spacing:-1.5px;margin:0 0 24px;white-space:pre-line}.slide h2{font-size:clamp(34px,3.7vw,58px)}.body{font-size:18px;line-height:1.55;max-width:700px;margin:0 0 26px}.credit{font-size:12px;line-height:1.4;color:var(--muted);margin-top:20px}.caption{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}.number{position:absolute;right:3.5vw;bottom:22px;font-size:12px;letter-spacing:2px}.hero{color:white;min-height:calc(100svh - 86px);justify-content:flex-end;padding:8vh 6vw}.hero>.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,21,19,.87),rgba(9,21,19,.2) 75%),linear-gradient(0deg,rgba(9,21,19,.55),transparent 50%)}.hero .inner{position:relative;z-index:1;max-width:800px}.hero .caption,.hero .credit{color:#e1e4df}.hero .number{z-index:2}.hero .body{max-width:580px}.enter{display:inline-block;margin-top:20px;padding:14px 0;text-decoration:none;border-bottom:1px solid #fff;font-size:15px}.split .splitgrid{display:grid;grid-template-columns:36% 59%;gap:5%;align-items:center}.visual img{width:100%;height:clamp(350px,61vh,660px);object-fit:contain;display:block;background:#e6e7df}.visual button,.imagebutton{display:block;padding:0;border:0;background:none;width:100%;cursor:zoom-in}.items{display:grid;gap:18px}.item{border-top:1px solid var(--line);padding-top:16px}.item h3{font-size:16px;line-height:1.4;margin:0 0 7px}.item p{font-size:16px;line-height:1.5;margin:0;color:var(--muted)}.text .items{grid-template-columns:repeat(3,1fr);gap:4vw;margin:4vh 0}.text .body{font:normal 28px/1.4 Georgia,serif;max-width:900px}.text .foot{margin-top:5vh;letter-spacing:1px;border-top:1px solid var(--line);padding-top:25px}.projects .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:15px}.card{text-decoration:none;display:block}.card img{width:100%;height:35vh;object-fit:cover}.card h3{font:normal 27px Georgia,serif;margin:17px 0 8px}.card p{font-size:14px;color:var(--muted)}.pairgrid,.plangrid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.plangrid{grid-template-columns:repeat(3,1fr)}.pairgrid img{width:100%;height:47vh;object-fit:contain;background:#e4e5de}.plangrid img{width:100%;height:38vh;object-fit:contain;background:#e4e5de}.pairgrid p,.plangrid p{font-size:14px}.palettegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin:4vh 0}.swatch{height:25vh}.palettegrid h3{font-size:17px}.palettegrid p{font-size:14px;color:var(--muted)}.foot{font-size:14px;line-height:1.6;color:var(--muted);max-width:900px}.video video{width:100%;height:53vh;background:#101918;object-fit:contain}.compare{background:var(--ink);color:var(--paper)}.compare .items{grid-template-columns:1fr 1fr;gap:7vw;margin:4vh 0}.compare .item p,.compare .foot{color:#d0d9d0}.compare .item h3{font:normal 26px Georgia,serif}.compare .item p{font-size:20px;line-height:1.6}.presenting .slide{display:none;height:calc(100svh - 146px);min-height:0;padding-top:3vh;padding-bottom:3vh}.presenting .slide.active{display:flex}.presenting .hero{padding-left:6vw}.presenting .visual img{height:57vh}.presenting .body{font-size:17px;margin-bottom:18px}.presenting .items{gap:12px}.presenting .credit{margin-top:12px}.presenting .number{display:none}#presentbar{height:60px;padding:0 3.5vw;border-top:1px solid var(--line);align-items:center;justify-content:space-between;background:var(--paper)}#presentbar:not([hidden]){display:flex}#presentbar span{font-size:13px}#presentbar button{border:1px solid var(--line);background:none;width:60px;height:38px;font-size:22px}dialog{border:0;color:var(--ink);background:var(--paper);width:min(760px,90vw);padding:32px;max-height:88vh}dialog::backdrop{background:#101918bb}.dialoghead{display:flex;align-items:center;justify-content:space-between}.dialoghead h2{font:32px Georgia,serif}.dialoghead button,#closeimage{border:0;background:none;padding:12px;font-size:22px}#indexlinks{display:grid;grid-template-columns:1fr 1fr;gap:12px}#indexlinks a{padding:18px 10px;border-top:1px solid var(--line);text-decoration:none;font-size:18px}dialog p{font-size:14px;line-height:1.5;color:var(--muted)}#lightbox{width:96vw;max-width:1600px;padding:20px}#lightbox img{display:block;max-width:100%;height:74vh;object-fit:contain;margin:auto}#closeimage{float:right}.imagebutton:hover img,.card:hover img{filter:brightness(1.04)}@media(max-width:1000px){header{padding:0 20px}.brand{font-size:15px}nav{gap:0}nav button,nav a{padding:10px}.slide{padding:4vh 4vw}.split .splitgrid{grid-template-columns:40% 56%;gap:4%}.body{font-size:16px}.slide h2{font-size:36px}.item p,.item h3{font-size:14px}.eyebrow{font-size:12px}.presenting .slide h2{font-size:34px}.presenting .body{font-size:16px}.presenting .visual img{height:50vh}.credit{font-size:12px}.text .body{font-size:24px}}@media(max-width:650px),(max-height:540px){header{height:auto;min-height:86px;flex-wrap:wrap;padding:12px 18px;gap:12px}.brand{font-size:14px}nav button,nav a{font-size:13px;padding:9px}.slide,.presenting .slide{height:auto;min-height:calc(100svh - 100px);padding:38px 22px;overflow:visible}.hero,.presenting .hero{min-height:80svh}.split .splitgrid{grid-template-columns:1fr;gap:25px}.visual img,.presenting .visual img{height:auto;max-height:60vh}.projects .cards,.text .items,.compare .items{grid-template-columns:1fr}.card img{height:35vh}.pairgrid,.plangrid{grid-template-columns:1fr}.pairgrid img,.plangrid img{height:auto;max-height:45vh}.palettegrid{grid-template-columns:repeat(2,1fr)}.swatch{height:130px}.hero h1,.hero h2{font-size:42px}.slide h2{font-size:35px}.presenting #presentbar{position:sticky;bottom:0;z-index:5}.presenting #presentbar>span:last-child{display:none}.number{display:none}#indexlinks{grid-template-columns:1fr}.hero .backdrop{object-position:65% center}.text .body{font-size:24px}.compare .item p{font-size:17px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
.filmchoices{display:flex;gap:10px;margin:0 0 12px}.filmchoices button{padding:10px 16px;border:1px solid var(--line);background:transparent;font-size:14px}.filmchoices button[aria-pressed=true]{background:var(--ink);color:white}.presenting .video video{height:40vh}.presenting .slide{overflow-y:auto}@media(min-width:651px) and (min-height:541px) and (max-height:820px){.presenting .slide{padding-top:20px;padding-bottom:20px}.presenting .slide h2{font-size:36px;margin-bottom:16px}.presenting .eyebrow{margin-bottom:14px}.presenting .body{font-size:16px;margin-bottom:14px;line-height:1.4}.presenting .item{padding-top:10px}.presenting .item h3,.presenting .item p{font-size:14px}.presenting .items{gap:10px}.presenting .cards{margin-top:0}.presenting .card img{height:28vh}.presenting .pairgrid img{height:36vh}.presenting .plangrid img{height:29vh}.presenting .palettegrid{margin:15px 0}.presenting .swatch{height:20vh}.presenting .video video{height:33vh}.presenting .visual img{height:49vh}.presenting .splitgrid{grid-template-columns:39% 57%;gap:4%}.presenting .credit{margin-top:14px}.presenting .text .items,.presenting .compare .items{margin:20px 0}.presenting .text .foot{margin-top:20px}}
/* Landscape presentation: preserve complete architecture and give media the space. */
.split .splitgrid{grid-template-columns:33% 63%;gap:4%}.visual img{height:min(65vh,720px);background:transparent}.projects .cards{grid-template-columns:1fr 1fr;gap:20px 30px}.card{display:grid;grid-template-columns:55% 45%;align-items:center;column-gap:16px}.card img{height:23vh;grid-row:1/3;object-fit:contain;background:transparent}.card h3{align-self:end;font-size:25px;margin:0 0 8px}.card p{align-self:start;line-height:1.5;margin:0;padding-right:15px}.imagebutton img{transition:filter .3s ease,transform .7s ease}.imagebutton:hover img{transform:scale(1.015)}.slide .item{transition:border-color .3s ease}.slide .item:hover{border-color:#8d7958}@keyframes arrive{from{opacity:.1;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.presenting .split .splitgrid{grid-template-columns:34% 62%;gap:4%}.presenting .visual img{height:59vh}.presenting .projects .card img{height:20vh}.presenting .projects .card h3{font-size:24px}.presenting .video{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;align-content:center;gap:0}.presenting .video:not(.active){display:none}.presenting .video h2{margin-bottom:12px}.presenting .video .body{margin-bottom:12px}.presenting .video video{height:100%;min-height:0;max-height:none}.presenting .video .eyebrow{margin-bottom:12px}.presenting .video .filmchoices{margin-bottom:10px}.presenting .video .credit{margin-top:8px}.presenting .video .caption{margin-top:8px}.presenting .video .number{display:none}
@media(min-width:651px) and (min-height:541px) and (max-height:820px){.presenting .visual img{height:54vh}.presenting .split .splitgrid{grid-template-columns:36% 60%;gap:4%}.presenting .projects .card img{height:19vh}.presenting .projects .card h3{font-size:22px}.presenting .projects .cards{gap:15px 25px}.presenting .projects .body{margin-bottom:20px}.presenting .slide h2{font-size:34px}.presenting .item p{line-height:1.35}}
@media(max-width:650px),(max-height:540px){.split .splitgrid,.presenting .split .splitgrid{grid-template-columns:1fr}.projects .cards{grid-template-columns:1fr}.card img,.presenting .projects .card img{height:22vh}.visual img,.presenting .visual img{height:auto;max-height:65vh}.presenting .video{display:flex}.presenting .video video{height:45vh;min-height:220px}.card h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.presenting .hero{overflow:hidden}.visual button{display:flex;justify-content:center}.visual img,.presenting .visual img{height:auto;width:auto;max-width:100%;max-height:59vh;margin:auto}.visual .caption{margin-top:14px}@media(max-width:650px),(max-height:540px){.visual img,.presenting .visual img{max-height:65vh}}
.materialgrid{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:22px;margin:18px 0 10px}.texture{height:22vh;background-size:300% 200%;background-repeat:no-repeat}.materialgrid h3{font:normal 22px/1.2 Georgia,serif;margin:16px 0 8px}.materialgrid p{font-size:14px;line-height:1.5;margin:0 0 10px;color:var(--muted)}.materialgrid .use{font-weight:600;color:var(--ink)}.materialboard .body{max-width:950px}.materialboard .foot{margin-top:16px}.presenting .materialboard .texture{height:20vh}.presenting .materialboard .materialgrid{margin:8px 0}.presenting .materialboard .foot{font-size:12px;margin-top:8px}@media(min-width:651px) and (max-height:820px){.presenting .materialboard h2{font-size:32px}.presenting .materialboard .texture{height:16vh}.materialgrid{gap:16px}.materialgrid h3{font-size:19px;margin-top:12px}.materialgrid p{font-size:14px;line-height:1.35}}@media(max-width:650px),(max-height:540px){.materialgrid{grid-template-columns:1fr 1fr}.texture,.presenting .materialboard .texture{height:160px}}

/* ---------- Motion layer ---------- */
.slide h1 .ln,.slide h2 .ln{display:block}
#scrollbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);transition:transform .25s linear}
.materialboard .eyebrow{color:var(--accent)}
.chip{display:flex;align-items:center;gap:8px;margin-top:12px;font:11px/1 ui-monospace,Consolas,monospace;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.chip i{width:14px;height:14px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px #0002}
.materialgrid .finish{font-size:12px;letter-spacing:.5px;border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}
.texwrap{overflow:hidden;position:relative}
.texture{transition:transform 1.4s cubic-bezier(.2,.7,.1,1)}
.materialgrid article:hover .texture{transform:scale(1.14)}
.materialgrid article,.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.card img{transition:transform 1s cubic-bezier(.2,.7,.1,1)}.card:hover img{transform:scale(1.04)}
.card h3{transition:color .3s}.card:hover h3{color:#8a5a3c}
.hero .backdrop{animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.14) translateX(0)}to{transform:scale(1.22) translateX(-1.5%)}}
.enter{position:relative}.enter:after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s}.enter:hover:after{transform:scaleX(1);transform-origin:left}

/* reveal choreography (only when motion is allowed) */
html.anim .slide .ln{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
html.anim .slide .ln>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.75,.1,1) calc(.12s + var(--i)*.1s)}
html.anim .slide.revealed .ln>span{transform:none}
html.anim .slide .eyebrow{opacity:0;letter-spacing:7px;transition:opacity .9s ease,letter-spacing 1.2s cubic-bezier(.2,.7,.1,1)}
html.anim .slide.revealed .eyebrow{opacity:1;letter-spacing:2px}
html.anim .slide .body,html.anim .slide .caption,html.anim .slide .foot,html.anim .slide .enter,html.anim .filmchoices,html.anim .video video{opacity:0;transform:translateY(16px);transition:opacity .9s ease .35s,transform .9s cubic-bezier(.2,.7,.1,1) .35s}
html.anim .slide.revealed .body,html.anim .slide.revealed .caption,html.anim .slide.revealed .foot,html.anim .slide.revealed .enter,html.anim .revealed .filmchoices,html.anim .revealed video{opacity:1;transform:none}
html.anim .item{position:relative;border-top-color:transparent;opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.1,1)}
html.anim .item:before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
html.anim .revealed .item{opacity:1;transform:none}html.anim .revealed .item:before{transform:scaleX(1)}
html.anim .revealed .item:nth-child(1),html.anim .revealed .item:nth-child(1):before{transition-delay:.45s}
html.anim .revealed .item:nth-child(2),html.anim .revealed .item:nth-child(2):before{transition-delay:.58s}
html.anim .revealed .item:nth-child(3),html.anim .revealed .item:nth-child(3):before{transition-delay:.71s}
html.anim .slide .item:hover:before{background:var(--accent)}
html.anim .visual .imagebutton{clip-path:inset(0 0 0 100%);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) .15s}
html.anim .visual .imagebutton img{transform:scale(1.12);transition:transform 2s cubic-bezier(.2,.7,.1,1) .15s,filter .3s}
html.anim .revealed .visual .imagebutton{clip-path:inset(0 0 0 0)}html.anim .revealed .visual .imagebutton img{transform:none}
html.anim .revealed .visual .imagebutton:hover img{transform:scale(1.02)}
html.anim .pairgrid>div,html.anim .plangrid>div,html.anim .cards>.card{opacity:0;translate:0 26px;transition:opacity .9s ease,translate 1s cubic-bezier(.2,.7,.1,1),transform .5s cubic-bezier(.2,.7,.1,1)}
html.anim .revealed .cards>.card{opacity:1;translate:0 0}
html.anim .revealed .cards>.card:nth-child(1){transition-delay:.3s,.3s,0s}html.anim .revealed .cards>.card:nth-child(2){transition-delay:.42s,.42s,0s}html.anim .revealed .cards>.card:nth-child(3){transition-delay:.54s,.54s,0s}html.anim .revealed .cards>.card:nth-child(4){transition-delay:.66s,.66s,0s}
html.anim .revealed .pairgrid>div,html.anim .revealed .plangrid>div{opacity:1;translate:0 0}
html.anim .materialgrid article{opacity:0;translate:0 30px;transition:opacity .8s ease calc(.3s + var(--d)*.11s),translate 1s cubic-bezier(.2,.7,.1,1) calc(.3s + var(--d)*.11s),transform .5s cubic-bezier(.2,.7,.1,1)}
html.anim .revealed .materialgrid article{opacity:1;translate:0 0}
html.anim .materialgrid .texwrap{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(.35s + var(--d)*.11s)}
html.anim .revealed .materialgrid .texwrap{clip-path:inset(0 0 0 0)}
html.anim .chip i{transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) calc(.95s + var(--d)*.11s)}
html.anim .revealed .chip i{transform:scale(1)}
html.anim .compare{background:linear-gradient(90deg,var(--ink) 50%,var(--paper) 50%) 100% 0/200% 100% no-repeat;transition:background-position 1.4s cubic-bezier(.7,0,.2,1)}
html.anim .compare.revealed{background-position:0 0}
html.anim .compare .items{position:relative}
html.anim .compare .item:nth-child(2){transition-delay:.9s}
#intro{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform 1s cubic-bezier(.8,0,.2,1)}
#intro div{text-align:center;letter-spacing:6px;font-size:20px;animation:introIn 1s cubic-bezier(.2,.7,.1,1) both}
#intro span{display:block;font-size:12px;letter-spacing:4px;margin-top:10px;opacity:.7}
#intro i{display:block;height:1px;background:#c2a779;margin:22px auto 0;width:220px;transform-origin:0 50%;animation:introLine 1s .15s cubic-bezier(.7,0,.2,1) both}
#intro.out{transform:translateY(-100%)}
@keyframes introIn{from{opacity:0;letter-spacing:14px}to{opacity:1}}@keyframes introLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#cursor{position:fixed;left:-42px;top:-42px;width:84px;height:84px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;pointer-events:none;z-index:50;opacity:0;scale:.3;transition:opacity .3s,scale .4s cubic-bezier(.3,1.5,.5,1);mix-blend-mode:difference;background:#fff;color:#000}
#cursor.on{opacity:1;scale:1}
@media(pointer:fine){[data-image]{cursor:none}}
@media(max-width:650px),(max-height:540px){.materialgrid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.hero .backdrop{animation:none}#intro,#cursor{display:none}}

/* ---------- Jabal Akhdar additions ---------- */
.diagram svg{display:block;width:100%;height:auto;max-height:62vh}
.presenting .diagram svg{max-height:54vh}
.text .items:has(.item:nth-child(4)){row-gap:3vh}
.palettegrid .swatch{border-radius:2px}
html.anim .revealed .item:nth-child(4),html.anim .revealed .item:nth-child(4):before{transition-delay:.84s}
html.anim .revealed .item:nth-child(5),html.anim .revealed .item:nth-child(5):before{transition-delay:.97s}
html.anim .revealed .item:nth-child(6),html.anim .revealed .item:nth-child(6):before{transition-delay:1.1s}
html.anim .palettegrid>div{opacity:0;translate:0 20px;transition:opacity .8s ease calc(.3s + var(--d)*.12s),translate .9s cubic-bezier(.2,.7,.1,1) calc(.3s + var(--d)*.12s)}
html.anim .palettegrid .swatch{transform:scaleY(0);transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.7,0,.2,1) calc(.35s + var(--d)*.12s)}
html.anim .revealed .palettegrid>div{opacity:1;translate:0 0}html.anim .revealed .palettegrid .swatch{transform:none}
html.anim .diagram .dg-draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.6,0,.2,1) .2s}
html.anim .revealed .diagram .dg-draw{stroke-dashoffset:0}
html.anim .diagram .dg-bld,html.anim .diagram .dg-plant,html.anim .diagram .dg-lab,html.anim .diagram .dg-wind,html.anim .diagram .dg-view,html.anim .diagram .dg-sun{opacity:0;transition:opacity .9s ease}
html.anim .revealed .diagram .dg-bld{opacity:1;transition-delay:1s}
html.anim .revealed .diagram .dg-plant{opacity:1;transition-delay:1.6s}
html.anim .revealed .diagram .dg-sun{opacity:1;transition-delay:1.3s}
html.anim .revealed .diagram .dg-wind,html.anim .revealed .diagram .dg-view{opacity:1;transition-delay:2s}
html.anim .revealed .diagram .dg-lab{opacity:1;transition-delay:2.3s}
html.anim .diagram .dg-ray path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease 1.5s}
html.anim .revealed .diagram .dg-ray path{stroke-dashoffset:0}
.diagram .dg-water{stroke-dasharray:10 6;animation:flow 1.6s linear infinite}
.diagram .dg-sun{transform-box:fill-box;transform-origin:center;animation:glow 4s ease-in-out infinite}
@keyframes flow{to{stroke-dashoffset:-32}}@keyframes glow{50%{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.diagram .dg-water,.diagram .dg-sun{animation:none}}
.diagram .dg-lab text{paint-order:stroke;stroke:#f4f1e9;stroke-width:5px;stroke-linejoin:round}
html.anim .diagram .dg-ray{opacity:0;transition:opacity .4s ease 1.5s}html.anim .revealed .diagram .dg-ray{opacity:1}

/* ---------- Print / PDF (1600x900 pages, one slide each) ---------- */
.printfilms{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:24px}
.printfilms img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.printfilms figcaption{font-size:14px;margin-top:10px;display:flex;gap:10px;align-items:center}
.printfilms figcaption span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px}
.watch{font-size:15px;margin:18px 0 0}.watch a{color:var(--accent);font-weight:600}
@media print{
 @page{size:1600px 900px;margin:0}
 html,body{background:var(--paper);-webkit-print-color-adjust:exact;print-color-adjust:exact}
 header,#presentbar,dialog,#intro,#cursor{display:none!important}
 html{scroll-padding-top:0}
 .slide,.hero{width:1600px;height:900px;min-height:0!important;padding:70px 90px 60px;border:0;break-after:page;page-break-after:always;break-inside:avoid;overflow:hidden;justify-content:center}
 .hero{justify-content:flex-end;padding:80px 100px}
 .slide:before{content:'GMAP  ·  ARCHITECTURAL CONSULTANCY';position:absolute;top:30px;left:90px;font-size:11px;letter-spacing:2px;opacity:.7;z-index:2}
 .hero:before{left:100px;color:#fff}
 .number{display:block!important;right:90px;bottom:28px}
 .hero .backdrop{animation:none!important;transform:none!important;translate:none!important}
 .slide h1,.slide h2{font-size:64px}.slide h2{font-size:54px}
 .text .body{font-size:26px}
 .split .splitgrid{grid-template-columns:34% 62%;gap:4%}
 .visual img{max-height:600px!important;height:auto!important;width:auto!important;max-width:100%}
 .diagram svg{max-height:620px}
 .cards .card img{height:190px}
 .texture{height:200px!important}
 .materialgrid{gap:20px}.materialgrid h3{font-size:21px}
 .swatch{height:240px}
 .printfilms{margin-top:6px}.printfilms img{max-height:430px}
 .video video,.filmchoices{display:none}
 .compare{background:var(--ink)!important}
}
@media print{
 .eyebrow{font-size:15px;margin-bottom:24px}
 .body{font-size:22px;max-width:900px}
 .text .body{font-size:30px;max-width:1100px}
 .item h3{font-size:20px}.item p{font-size:18px}
 .items{gap:22px}
 .text .items{gap:40px 60px}
 .caption{font-size:14px}.foot{font-size:16px}
 .card h3{font-size:28px}.card p{font-size:17px}
 .materialgrid h3{font-size:23px}.materialgrid p{font-size:15.5px;line-height:1.45}.materialgrid .finish{font-size:13.5px}.chip{font-size:12px}
 .palettegrid h3{font-size:21px}.palettegrid p{font-size:17px}
 .compare .item h3{font-size:30px}.compare .item p{font-size:22px}
 .hero .body{font-size:22px}.hero .caption{font-size:15px}
 .number{font-size:14px}.slide:before{font-size:12px}
}
@media print{.slide:before{top:auto;bottom:28px;font-size:12px}.hero:before{bottom:28px}.slide{padding-top:56px;padding-bottom:70px}}
.filmchoices .snd{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.filmchoices .snd:before{content:'';width:9px;height:9px;border-radius:50%;background:#b9b3a6}
.filmchoices .snd.on{background:var(--ink);color:#fff}.filmchoices .snd.on:before{background:#7fd08a;box-shadow:0 0 0 3px #7fd08a44}

/* ---------- Two grounds + feature grid ---------- */
.groundgrid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin:2vh 0 1vh}
.groundgrid h3{font:normal 26px/1.2 Georgia,serif;margin:0 0 14px}
.gdiag svg{display:block;width:100%;height:auto;max-height:26vh;border:1px solid var(--line)}
.groundgrid ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.groundgrid li{font-size:15px;line-height:1.45;color:var(--muted);padding-left:18px;position:relative}
.groundgrid li:before{content:'';position:absolute;left:0;top:.6em;width:8px;height:1px;background:var(--ink)}
.featgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 30px;margin:2vh 0 1vh}
.ficon{width:64px;height:64px;color:var(--ink);margin-bottom:10px}.ficon svg{width:100%;height:100%}
.featgrid h3{font:normal 21px/1.2 Georgia,serif;margin:0 0 6px}.featgrid p{font-size:14.5px;line-height:1.45;color:var(--muted);margin:0}
.featgrid article{border-top:1px solid var(--line);padding-top:16px}
html.anim .groundgrid article,html.anim .featgrid article{opacity:0;translate:0 24px;transition:opacity .8s ease calc(.3s + var(--d)*.12s),translate .9s cubic-bezier(.2,.7,.1,1) calc(.3s + var(--d)*.12s)}
html.anim .revealed .groundgrid article,html.anim .revealed .featgrid article{opacity:1;translate:0 0}
html.anim .ficon svg *{stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.6s ease calc(.5s + var(--d)*.12s)}
html.anim .revealed .ficon svg *{stroke-dashoffset:0}
.featgrid article:hover .ficon{color:var(--accent)}
@media(max-width:650px),(max-height:540px){.groundgrid,.featgrid{grid-template-columns:1fr}.featgrid{grid-template-columns:1fr 1fr}}
@media print{.gdiag svg{max-height:250px}.groundgrid li{font-size:17px}.groundgrid h3{font-size:28px}.featgrid h3{font-size:22px}.featgrid p{font-size:16px}.ficon{width:66px;height:66px}}

/* ---------- Official GMAP logo ---------- */
.brand{display:flex;align-items:center;gap:16px;letter-spacing:0}
.brand img{height:58px;width:auto;display:block}
.brand span{margin:0;padding-left:16px;border-left:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#1c427b}
#intro{background:#1c427b}
#intro img{display:block;height:130px;width:auto;margin:0 auto}
#intro span{letter-spacing:5px;text-transform:uppercase;margin-top:18px}
.coverlogo{display:none}
.endlogo{display:block;height:84px;width:auto;margin:0 0 34px}
#scrollbar{background:#1c427b}
@media(max-width:650px),(max-height:540px){.brand img{height:42px}.brand span{font-size:10px;padding-left:10px}}
@media print{
 .coverlogo{display:block;height:120px;width:auto;margin:0 0 44px}
 .slide:before{content:'';width:78px;height:46px;bottom:22px;background:url(assets/images/gmap-logo-blue.png) left center/contain no-repeat;opacity:1}
 .hero:before{background-image:url(assets/images/gmap-logo-white.png)}
 .compare:before{background-image:url(assets/images/gmap-logo-white.png)}
 .slide:first-child:before{display:none}
}
.endlogo,.coverlogo{align-self:flex-start;flex:none;object-fit:contain}@media print{.coverlogo{height:140px}}
@media print{.slide:last-child:before{display:none}}
.diagram .jplan .dg-lab text{stroke:none}

/* ---------- GMAP survey advantage ---------- */
.advantage>*:not(.contours):not(.number){position:relative;z-index:1}
.advantage .contours{position:absolute;right:-40px;top:-30px;width:min(62vw,900px);height:auto;opacity:.22;pointer-events:none;z-index:0}
.advantage .eyebrow{color:#1c427b}
.advantage .body{max-width:760px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:1.5vh 0 3.5vh;border-top:2px solid #1c427b;padding-top:16px;max-width:1100px}
.stats b{display:block;font:normal clamp(30px,3vw,46px)/1 Georgia,serif;color:#1c427b;letter-spacing:-1px}
.stats span{display:block;margin-top:8px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.advantage .items{grid-template-columns:repeat(3,1fr);gap:18px 44px}
html.anim .contours path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.4,0,.2,1) calc(.1s + var(--k)*.09s)}
html.anim .revealed .contours path{stroke-dashoffset:0}
html.anim .contours .pts{opacity:0;transition:opacity 1s ease 1.8s}html.anim .revealed .contours .pts{opacity:1}
html.anim .stats>div{opacity:0;translate:0 18px;transition:opacity .8s ease calc(.35s + var(--d)*.12s),translate .9s cubic-bezier(.2,.7,.1,1) calc(.35s + var(--d)*.12s)}
html.anim .revealed .stats>div{opacity:1;translate:0 0}
@media(max-width:650px),(max-height:540px){.stats{grid-template-columns:1fr 1fr}.advantage .items{grid-template-columns:1fr}.advantage .contours{width:120vw}}
@media print{.advantage .contours{width:900px;opacity:.2}.stats b{font-size:46px}.stats span{font-size:13px}.advantage .item p{font-size:16.5px}.advantage .items{gap:16px 44px}.stats{margin:10px 0 26px}}
@media print{.advantage .contours{opacity:.15}.advantage .foot{font-size:14px;margin-top:6px}.advantage{padding-bottom:84px}}

/* ---------- Layout fixes: image alignment, no sideways scroll, video fit ---------- */
.slide{overflow-x:hidden}
.presenting .slide{overflow-x:hidden}
.visual{min-width:0}
.visual button,.visual .imagebutton{justify-content:flex-start;overflow:hidden;width:fit-content;max-width:100%}
.visual img,.presenting .visual img{margin:0;min-height:120px;aspect-ratio:4/3}
.visual .caption{text-align:left}
.video video{display:block;width:min(100%,calc(58vh*16/9));height:auto;aspect-ratio:16/9;background:#101918;object-fit:cover}
.presenting .video video{width:auto;max-width:100%;height:100%;aspect-ratio:16/9;justify-self:start;object-fit:cover}
.video .filmchoices{max-width:min(100%,calc(58vh*16/9))}
@media(max-width:650px),(max-height:540px){.video video,.presenting .video video{width:100%;height:auto}}
@media screen and (min-width:1000px) and (min-height:541px){
 .video,.presenting .video{display:grid;grid-template-columns:minmax(280px,28%) 1fr;grid-template-rows:auto auto auto auto 1fr auto;column-gap:4vw;align-content:center;align-items:start}
 .presenting .video:not(.active){display:none}
 .video>.eyebrow,.video>h2,.video>.body,.video>.filmchoices{grid-column:1}
 .video>video,.presenting .video>video{grid-column:2;grid-row:1/6;align-self:center;justify-self:start;width:min(100%,calc((100svh - 200px)*16/9));height:auto;max-height:none;aspect-ratio:16/9}
 .presenting .video>video{width:min(100%,calc((100svh - 260px)*16/9))}
 .video>.caption{grid-column:2;grid-row:6}
 .video .filmchoices{flex-wrap:wrap;max-width:none;margin-top:8px}
 .video .filmchoices .snd{margin-left:0}
}
.advantage .body{margin-bottom:4vh}@media print{.advantage .body{margin-bottom:40px}}
.diagram .sunpath .dg-lab text{stroke:none}

/* ---------- Project cards: identical image frames ---------- */
.projects .card img,.presenting .projects .card img{width:100%;height:auto!important;aspect-ratio:3/2;max-height:28vh;object-fit:cover;object-position:center;background:none;display:block}
.presenting .projects .card img{max-height:24vh}
.projects .card:hover img{transform:scale(1.03)}
.projects .card{overflow:hidden}
@media(max-width:650px),(max-height:540px){.projects .card img,.presenting .projects .card img{max-height:none}}
@media print{.projects .card img{max-height:220px}}