/* Generic runtime styles shared by Popqod design themes: entrance animations, the optional intro, generic pages and elements added from the editor. */
Entrance animations
   Content is hidden only after the script has confirmed it can reveal it (html.jot-anim-ready). */
.jot-anim-ready [data-anim]:not([data-anim=float]):not([data-anim-trigger=hover]):not(.is-in){opacity:0}
.jot-anim-ready [data-anim].is-in{animation-duration:var(--a-dur,700ms);animation-timing-function:var(--a-ease,ease);animation-delay:var(--a-delay,0ms);animation-fill-mode:both}
.jot-anim-ready [data-anim].anim-done{animation:none!important;opacity:1}
[data-anim=fade].is-in{animation-name:jot-fade}
[data-anim=fade-up].is-in{animation-name:jot-fade-up}
[data-anim=fade-down].is-in{animation-name:jot-fade-down}
[data-anim=fade-start].is-in{animation-name:jot-fade-start}
[data-anim=fade-end].is-in{animation-name:jot-fade-end}
[data-anim=zoom-in].is-in{animation-name:jot-zoom-in}
[data-anim=zoom-out].is-in{animation-name:jot-zoom-out}
[data-anim=flip-x].is-in{animation-name:jot-flip-x}
[data-anim=flip-y].is-in{animation-name:jot-flip-y}
[data-anim=rotate-in].is-in{animation-name:jot-rotate-in}
[data-anim=blur-in].is-in{animation-name:jot-blur-in}
[data-anim=wipe].is-in{animation-name:jot-wipe}
[data-anim=paint].is-in{animation-name:jot-paint}
[data-anim=bounce-in].is-in{animation-name:jot-bounce-in}
[data-anim=float]{animation:jot-float var(--a-dur,3000ms) ease-in-out var(--a-delay,0ms) infinite alternate}
[data-anim-dir=up]{--a-dx:0;--a-dy:1}
[data-anim-dir=down]{--a-dx:0;--a-dy:-1}
[data-anim-dir=start]{--a-dx:-1;--a-dy:0}
[data-anim-dir=end]{--a-dx:1;--a-dy:0}
@keyframes jot-fade{from{opacity:0}to{opacity:1}}
@keyframes jot-fade-up{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * var(--a-dx,0) * var(--a-sign)),calc(var(--a-dist,24px) * var(--a-dy,1)),0)}to{opacity:1;transform:none}}
@keyframes jot-fade-down{from{opacity:0;transform:translate3d(0,calc(var(--a-dist,24px) * -1),0)}to{opacity:1;transform:none}}
@keyframes jot-fade-start{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * -1 * var(--a-sign)),0,0)}to{opacity:1;transform:none}}
@keyframes jot-fade-end{from{opacity:0;transform:translate3d(calc(var(--a-dist,24px) * var(--a-sign)),0,0)}to{opacity:1;transform:none}}
@keyframes jot-zoom-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes jot-zoom-out{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:none}}
@keyframes jot-flip-x{from{opacity:0;transform:perspective(900px) rotateX(70deg)}to{opacity:1;transform:none}}
@keyframes jot-flip-y{from{opacity:0;transform:perspective(900px) rotateY(calc(70deg * var(--a-sign)))}to{opacity:1;transform:none}}
@keyframes jot-rotate-in{from{opacity:0;transform:rotate(calc(-12deg * var(--a-sign))) scale(.94)}to{opacity:1;transform:none}}
@keyframes jot-blur-in{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
@keyframes jot-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes jot-paint{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[dir=rtl] [data-anim=paint].is-in{animation-name:jot-paint-rtl}
@keyframes jot-paint-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes jot-bounce-in{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}80%{transform:scale(.98)}100%{opacity:1;transform:none}}
@keyframes jot-float{from{transform:translate3d(0,calc(var(--a-dist,12px) * -.5),0)}to{transform:translate3d(0,calc(var(--a-dist,12px) * .5),0)}}

/* ---------------------------------------------------------------- Paint-roller intro */
html.jot-intro-pending::before{content:"";position:fixed;inset:0;z-index:2147483000;background:var(--intro-cover,#efe9e1)}
html.jot-intro-pending body{overflow:hidden}
.jot-intro{position:fixed;inset:0;z-index:2147483001;overflow:hidden;cursor:wait;touch-action:none}
.jot-intro canvas{position:absolute;inset:0;width:100%;height:100%}
.jot-intro .jot-roller{position:absolute;top:0;left:0;will-change:transform;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(0,0,0,.28))}
.jot-intro .jot-intro-logo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.jot-intro .jot-intro-logo svg{width:min(120px,26vw);height:auto;color:#3a3540;opacity:.85}
.jot-intro.is-leaving{transition:opacity var(--intro-fade,450ms) ease;opacity:0}
.jot-intro-skip{position:absolute;bottom:18px;inset-inline-end:18px;z-index:3;padding:8px 12px;border-radius:4px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.6);color:#2a2730;font:600 12px var(--sans);cursor:pointer}


/* ---------------------------------------------------------------- Generic pages (posts, legal pages, 404) */
.page-shell{padding:calc(var(--header-h) + 70px) clamp(22px,7vw,108px) 80px;max-width:980px;margin-inline:auto}
.page-shell h1{font-size:clamp(2.4rem,5vw,4rem)}
.page-shell .entry-content{color:#d6cfca;line-height:1.85}
.page-shell .entry-content a{color:#e8d7e9;border-bottom:1px solid rgba(204,166,210,.55)}
.page-shell .entry-content img{height:auto;border-radius:8px}
.page-shell .post-list article{padding:24px 0;border-bottom:1px solid var(--line)}


Elements added from the editor's "+ Add" panel */
.jot-x-slot{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px;width:100%;flex-basis:100%}
.hero-copy>.jot-x-slot{margin-top:26px}
.jot-x-after{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(28px,4vw,56px) max(clamp(22px,7vw,108px),calc((100% - var(--content-max,1296px)) / 2))}
.jot-x-section{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.jot-x-after>.jot-x,.jot-x-section>.jot-x,.jot-x-slot>.jot-x{margin:0}
.jot-x-heading{max-width:900px}
.jot-x-h4{font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.2}
.jot-x-text{max-width:760px;color:var(--muted);line-height:1.75;font-size:16px;white-space:pre-line}
.jot-x-button{align-self:flex-start}
.button-outline{background:transparent;color:var(--ink);border:1px solid rgba(242,236,229,.45)}
.button-outline:hover{border-color:var(--accent);color:#fff}
.jot-x-image{align-self:stretch;max-width:min(100%,900px);margin:0}
.jot-x-image img{display:block;width:100%;height:auto;border-radius:10px;object-fit:var(--img-objfit,cover);object-position:var(--img-x,50%) var(--img-y,50%)}
.jot-x-icon{display:inline-flex;color:var(--accent);width:48px;height:48px}
.jot-x-icon svg{width:100%;height:100%}
.jot-x-divider{align-self:stretch;border:0;border-top:1px solid var(--line);height:0;width:100%}
.jot-x-spacer{align-self:stretch;height:48px}
.jot-x-video,.jot-x-map{align-self:stretch;width:100%;max-width:1000px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111113;border:1px solid var(--line)}
.jot-x-map{aspect-ratio:auto;height:380px}
.jot-x-video iframe,.jot-x-video video,.jot-x-map iframe{display:block;width:100%;height:100%;border:0}
.jot-x-ph{display:grid;place-items:center;min-height:160px;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:10px;padding:20px;text-align:center}
.jot-x-image .jot-x-ph{aspect-ratio:16/9}
.jot-x-empty{color:var(--muted);border:1px dashed var(--line);border-radius:10px;padding:28px;width:100%;text-align:center;margin:0}
.jot-is-preview .jot-x-video iframe,.jot-is-preview .jot-x-map iframe,.jot-is-preview .jot-x-video video{pointer-events:none}
.jot-map-wait{display:flex}.jot-map-load{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;padding:20px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:center}.jot-map-pin{font-size:30px;line-height:1;opacity:.8}.jot-map-q{max-width:90%;opacity:.85}.jot-map-btn{display:inline-block;padding:10px 18px;border:1px solid currentColor;border-radius:999px;font-weight:600}.jot-map-load:hover .jot-map-btn,.jot-map-load:focus-visible .jot-map-btn{background:rgba(255,255,255,.08)}

/* Same-looking type on every device: bundled fallbacks for Georgia (metric-compatible Gelasio) and Inter. */
@font-face{font-family:"JOT Gelasio";src:url("../fonts/gelasio-400.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"JOT Gelasio";src:url("../fonts/gelasio-700.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"JOT Inter";src:url("../fonts/inter.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}
/* Nothing may push the page wider than the screen. */
#jot-app{overflow-x:clip;max-width:100%}
h1,h2,h3,h4,p,a,span,li{overflow-wrap:break-word}
img,video,iframe,svg{max-width:100%}
@media(max-width:800px){.trust-strip,.expertise-grid,.stats-band,.commitment-grid,.process-grid,.service-grid,.project-grid{-webkit-hyphens:auto;hyphens:auto}}

/* Lets a photo section size itself from the section width (cqw). */
.jot-section{container-type:inline-size}

/* Auto-scrolling project slider (Home → Our projects). */
.project-strip.is-slider{display:block;overflow:hidden;container-type:inline-size;--sl-gap:14px;--sl-v:var(--sl-vd,3)}
.is-slider .slider-track{display:flex;gap:var(--sl-gap);width:max-content;animation:jot-marquee var(--sl-dur,30s) linear infinite;will-change:transform}
.is-slider .project-tile{flex:none;width:calc((100cqw - (var(--sl-v) - 1) * var(--sl-gap)) / var(--sl-v))}
.is-slider .project-tile:last-child{display:block}
.is-slider.pause-on-hover:hover .slider-track,.is-slider.pause-on-hover:focus-within .slider-track{animation-play-state:paused}
@keyframes jot-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--sl-gap) / 2))}}
[dir=rtl] .is-slider .slider-track{animation-name:jot-marquee-rtl}
@keyframes jot-marquee-rtl{from{transform:translateX(0)}to{transform:translateX(calc(50% + var(--sl-gap) / 2))}}
@media(max-width:800px){.project-strip.is-slider{--sl-gap:9px;--sl-v:var(--sl-vm,2)}}
@media(prefers-reduced-motion:reduce){.is-slider .slider-track{animation:none}.project-strip.is-slider{overflow-x:auto;scroll-snap-type:x mandatory}.is-slider .project-tile{scroll-snap-align:start}.is-slider .is-clone{display:none!important}}