/* INNER04: inner-page typography and art. The homepage does not load this file. */
.page-hero{gap:clamp(2rem,4vw,4.5rem);padding-block:2rem 3.5rem}
.page-hero h1{font-size:clamp(3.4rem,5.8vw,6.4rem);line-height:1.32;letter-spacing:0;word-spacing:.025em;max-width:17ch}
.page-hero h1>em{margin-top:.16em}
.page-lead{line-height:1.75;max-width:55ch}
.breadcrumb{flex-wrap:wrap;gap:.4rem .9rem;margin-bottom:2.5rem}
.page-intro,.section-heading,.offer-row,.scope-paper,.faq-section,.founder-section{column-gap:clamp(2rem,4.5vw,4rem)}
.page-intro,.scope-paper,.founder-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.section-heading{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.offer-row{grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.18fr)}
.faq-section{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.page-intro h2,.section-heading h2,.scope-paper h2,.page-process>h2,.scenario-section>h2,.care-section>h2,.founder-identity h2,.faq-heading h2{line-height:1.32;text-wrap:balance;letter-spacing:0;word-spacing:.025em}
.offer-row h3,.scenario-grid h3,.page-process .step h3{line-height:1.32;text-wrap:balance}
.care-grid dt,.contact-tip h3,.contact-context>h2{line-height:1.32}
.inline-enquiry .enquiry-content h2,.enquiry-content h2,.branch-card h3,.channel-card h2{line-height:1.32}
main[class^="page-"] .network-grid h2{line-height:1.34;letter-spacing:0}
.page-intro>p,.offer-row>p,.scope-paper>p,.faq-list details>p,.care-grid dd,.founder-section>p{line-height:1.75;max-width:60ch}
.scenario-grid p,.page-process .step p,.contact-tip p{line-height:1.75}
.page-intro{padding-block:clamp(3.5rem,6vw,5rem)}
.page-process .steps{gap:clamp(1.75rem,3vw,3rem)}
.page-process .step h3{margin-bottom:.85rem}
.faq-list summary{padding-block:1.35rem}
.faq-list summary>span{flex:none}
.related-links>a>span:first-child{min-width:0}
main[class^="page-"] .closing h2{line-height:1.32;max-width:24ch;text-wrap:balance;letter-spacing:0;word-spacing:.025em}
main[class^="page-"] .closing-row p{line-height:1.75}
/* The existing motion switch and system preference also govern this dance. */
.type-stamp{transform-origin:50% 55%;line-height:1.34;letter-spacing:0;word-spacing:.025em}
.type-stamp:not(.stamp-tourism){width:fit-content;max-width:90%;min-width:0;justify-self:center;text-align:center;padding:.48em .62em;font-size:clamp(2rem,3.4vw,4.2rem);overflow-wrap:normal}
.type-stamp:not(.stamp-tourism)>span{display:block}
.type-stamp:not(.stamp-tourism)>span+span::before{content:none}
.type-stamp.stamp-studio{font-size:clamp(1.6rem,2.6vw,3.3rem)}
.type-stamp.stamp-contact{font-size:clamp(1.6rem,2.65vw,3.3rem)}
.type-stamp.stamp-croatia{padding:.9em .55em;font-size:clamp(2.2rem,3.65vw,4.5rem)}
.type-stamp{animation:inner-stamp-drift 7s ease-in-out infinite;animation-play-state:paused}
html[data-motion="on"]:not([data-visibility="hidden"]) .type-stamp[data-inner-visible="true"]{animation-play-state:running}
@keyframes inner-stamp-drift{
 0%,100%{translate:0 2px;rotate:-1deg}
 50%{translate:0 -9px;rotate:1.5deg}
}
/* Separate flight and pointer layers keep the camera expressive and the copy still. */
.camera-scene{position:relative;justify-self:center;align-self:center;width:100%;max-width:32rem;aspect-ratio:1;pointer-events:none;user-select:none}
.camera-parallax{position:absolute;inset:8%;transform:translate(var(--camera-x,0px),var(--camera-y,0px)) rotate(var(--camera-turn,0deg));transform-origin:50% 50%}
.camera-flight{width:100%;height:100%;transform:rotate(-5deg);animation:camera-flight 7.4s ease-in-out infinite;animation-play-state:paused}
.camera-flight img{display:block;width:100%;height:100%;object-fit:contain}
.camera-count{position:absolute;top:1%;left:8%;font:800 .85rem/1.5 var(--body);letter-spacing:.2em;color:var(--yellow);rotate:-7deg}
.camera-count::after{content:"";display:block;width:3.5rem;height:.35rem;margin-top:.55rem;background:var(--red);rotate:-4deg}
.camera-caption{position:absolute;bottom:0;right:5%;max-width:90%;padding:.38em .65em;background:var(--paper);color:var(--black);font:clamp(1.4rem,2.1vw,2rem)/1.32 var(--display);text-transform:uppercase;rotate:6deg;box-shadow:.18em .18em 0 var(--green);animation:camera-tag 7.4s ease-in-out infinite;animation-play-state:paused}
html[data-motion="on"]:not([data-visibility="hidden"]) .camera-scene[data-inner-visible="true"] :is(.camera-flight,.camera-caption){animation-play-state:running}
html[data-motion="paused"] .camera-parallax{transform:none}
@keyframes camera-flight{
 0%,100%{transform:translate(-2%,2.5%) rotate(-8deg)}
 25%{transform:translate(3.5%,-3%) rotate(5deg)}
 50%{transform:translate(-1%,-5%) rotate(-4deg)}
 75%{transform:translate(-4%,1%) rotate(-11deg)}
}
@keyframes camera-tag{
 0%,100%{translate:0 0;rotate:6deg}
 50%{translate:0 -5px;rotate:3deg}
}
@media(hover:hover) and (pointer:fine){
 .offer-number{transition:transform .45s var(--ease),color .3s}
 .scenario-grid h3,.care-grid dt{transition:transform .45s var(--ease);transform-origin:0 50%}
 html[data-motion="on"] .offer-row:hover .offer-number{transform:translateY(-3px) rotate(-7deg);color:var(--yellow)}
 html[data-motion="on"] .offer-row:nth-child(even):hover .offer-number{transform:translateY(-3px) rotate(7deg)}
 html[data-motion="on"] :is(.scenario-grid article,.care-grid>div):hover>:is(h3,dt){transform:translateY(-3px) rotate(-1deg)}
 html[data-motion="on"] :is(.scenario-grid article,.care-grid>div):nth-child(even):hover>:is(h3,dt){transform:translateY(-3px) rotate(1deg)}
}
@media(min-width:801px) and (max-width:1100px){
 .page-hero h1{font-size:clamp(3.1rem,5.8vw,4rem)}
 .type-stamp{font-size:clamp(2.1rem,4vw,3.2rem)}
 .stamp-tourism{font-size:2.5rem}
}
@media(max-width:800px){
 .page-hero{gap:1rem;padding-block:1.75rem 2.75rem}
 .page-hero h1{font-size:clamp(3.1rem,7.8vw,4.8rem);max-width:18ch}
 .breadcrumb{margin-bottom:1.75rem}
 .page-intro,.section-heading,.scope-paper,.faq-section,.founder-section{grid-template-columns:minmax(0,1fr)}
 .offer-row{grid-template-columns:3rem minmax(0,1fr);gap:.75rem 1.25rem}
 .offer-row>p{grid-column:2}
 .page-process .step{grid-template-columns:2rem minmax(0,1fr)}
 .page-process .step h3{margin:0}
 .page-process .step>p{max-width:60ch}
 .type-stamp{margin-block:1.25rem .75rem}
 .type-stamp:not(.stamp-tourism){font-size:clamp(1.8rem,4.8vw,2.3rem);justify-self:end;margin-right:5%}
 .type-stamp.stamp-studio,.type-stamp.stamp-contact{font-size:clamp(1.6rem,4.2vw,2rem)}
 .camera-scene{width:min(80%,22rem);margin-block:.5rem 1rem;justify-self:end;margin-right:3%}
 .camera-caption{font-size:1.5rem}
 .page-intro>p{max-width:60ch}
}
@media(max-width:500px){
 .page-hero h1{font-size:clamp(2.65rem,10.5vw,3.3rem);line-height:1.32;max-width:100%;overflow-wrap:anywhere}
 .page-hero .eyebrow{line-height:1.65}
 .page-lead{margin-top:1.25rem}
 .page-jumps{column-gap:1.15rem;margin-top:1.5rem}
 .type-stamp{max-width:88%;font-size:1.8rem}
 .stamp-tourism{font-size:1.6rem}
 .camera-scene{width:82%;max-width:18rem;margin-block:1.5rem 1rem;margin-right:6%}
 .camera-count{font-size:.7rem;top:-2%}
 .camera-caption{font-size:1.25rem;right:0}
 .offer-row{grid-template-columns:2.5rem minmax(0,1fr);gap:.6rem 1rem}
 .offer-row>p{grid-column:1/-1;margin-top:.4rem}
 .page-process .steps{gap:1.75rem}
 .page-intro h2,.section-heading h2,.page-process>h2,.care-section>h2,.scenario-section>h2,.faq-heading h2{font-size:clamp(2.1rem,8.5vw,2.6rem)}
 .scope-paper h2{font-size:clamp(2rem,8vw,2.3rem)}
 .page-process .step h3,.scenario-grid h3{font-size:1.8rem}
 .contact-tip h3{line-height:1.32}
 main[class^="page-"] .closing h2{font-size:clamp(2.4rem,9vw,3.3rem);overflow-wrap:anywhere}
}

/* A different rhythm for each service, sharing the approved camera's controls. */
main[class^="page-"]{overflow-x:clip}
.inner-art-scene{position:relative;justify-self:center;align-self:center;pointer-events:none;user-select:none;width:100%;max-width:32rem;aspect-ratio:1}
.art-parallax{position:absolute;inset:7%;transform:translate(var(--camera-x,0px),var(--camera-y,0px)) rotate(var(--camera-turn,0deg))}
.art-flight{width:100%;height:100%;animation:art-broadcast 7.6s ease-in-out infinite;animation-play-state:paused}
.art-flight img{display:block;width:100%;height:100%;object-fit:contain}
.art-label{position:absolute;bottom:0;right:3%;max-width:94%;padding:.45em .7em;background:var(--paper);color:var(--black);font:clamp(1.2rem,1.7vw,1.65rem)/1.34 var(--display);text-align:center;text-transform:uppercase;rotate:5deg;box-shadow:.2em .2em 0 var(--green)}
.scene-media .art-flight{animation-name:art-amplify;animation-duration:8.6s}
.scene-media .art-label{right:auto;left:3%;rotate:-5deg;box-shadow:.2em .2em 0 var(--red)}
.scene-web .art-flight{animation-name:art-browser;animation-duration:8s}
.scene-web .art-label{rotate:-4deg}
.scene-contact .art-flight{animation-name:art-plane;animation-duration:9s}
.scene-contact .art-parallax{inset:11%}
.scene-contact .art-label{bottom:3%;right:7%;rotate:4deg}
.stamp-scene{max-width:28rem}
.stamp-scene .art-parallax{inset:10%}
.stamp-scene .type-stamp{width:100%;max-width:100%;height:100%;margin:0;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.stamp-scene .stamp-tourism{font-size:clamp(2rem,3.15vw,3.7rem)}
.stamp-scene .stamp-croatia{border-radius:50%;font-size:clamp(2rem,3.5vw,4rem);padding:1rem;box-shadow:none}
.stamp-scene::before{content:"";position:absolute;inset:1%;border:1px dashed var(--yellow);border-radius:50%;opacity:.6;animation:art-orbit 32s linear infinite;animation-play-state:paused}
.scene-croatia::before{border:3px solid transparent;border-top-color:var(--red);border-right-color:var(--yellow);border-bottom-color:var(--green);animation-direction:reverse;animation-duration:22s;opacity:1}
.scene-croatia .type-stamp::before{left:9%;top:11%;width:26%;rotate:-16deg}
.page-tourism .page-scenic img{transform:scale(1.07);animation:coast-drift 22s ease-in-out infinite;animation-play-state:paused}
.studio-art .art-parallax{inset:10% 1%;display:flex;align-items:center}
.studio-strips{display:grid;gap:.8rem;width:100%}
.studio-strips>span{display:block;width:fit-content;max-width:96%;padding:.28em .45em;font:clamp(1.65rem,3vw,3.3rem)/1.34 var(--display);text-transform:uppercase;background:var(--yellow);color:var(--black);rotate:-5deg;animation:studio-rhythm 6.8s ease-in-out infinite;animation-play-state:paused}
.studio-strips>span:nth-child(2){justify-self:end;background:var(--paper);rotate:4deg;animation-delay:-2.25s}
.studio-strips>span:nth-child(3){justify-self:center;background:var(--green);color:var(--paper);rotate:-3deg;animation-delay:-4.5s}
html[data-motion="on"]:not([data-visibility="hidden"]) .inner-art-scene[data-inner-visible="true"] :is(.art-flight,.studio-strips>span),
html[data-motion="on"]:not([data-visibility="hidden"]) .stamp-scene[data-inner-visible="true"]::before,
html[data-motion="on"]:not([data-visibility="hidden"]) .page-hero:has(.inner-art-scene[data-inner-visible="true"]) .page-scenic img{animation-play-state:running}
html[data-motion="paused"] .art-parallax{transform:none}
@keyframes art-broadcast{0%,100%{transform:translate(-2%,2%) rotate(-8deg)}45%{transform:translate(3%,-4%) rotate(5deg)}75%{transform:translate(-1%,-1%) rotate(-3deg)}}
@keyframes art-amplify{0%,100%{transform:translate(1%,2%) rotate(7deg) scale(.96)}45%{transform:translate(-3%,-3%) rotate(-4deg) scale(1.02)}}
@keyframes art-browser{0%,100%{transform:perspective(900px) translateY(2%) rotateY(-7deg) rotate(-3deg)}50%{transform:perspective(900px) translateY(-4%) rotateY(7deg) rotate(3deg)}}
@keyframes art-plane{0%,100%{transform:translate(-5%,6%) rotate(-9deg)}35%{transform:translate(6%,-6%) rotate(5deg)}70%{transform:translate(2%,-2%) rotate(-3deg)}}
@keyframes art-orbit{to{transform:rotate(360deg)}}
@keyframes coast-drift{0%,100%{transform:scale(1.07) translateX(-1%)}50%{transform:scale(1.11) translateX(1%)}}
@keyframes studio-rhythm{0%,100%{translate:-2% 2px}50%{translate:2% -7px}}

/* One-time entrances settle into normal reading positions. Forms stay still. */
[data-inner-entry]{--entry-x:clamp(3rem,8vw,7rem);--entry-y:1.25rem;--entry-turn:1.8deg;--entry-rest:0deg}
[data-inner-entry="left"]{--entry-x:clamp(-7rem,-8vw,-3rem);--entry-turn:-1.8deg}
[data-inner-entry="up"]{--entry-x:0px;--entry-y:1.7rem;--entry-turn:0deg}
.scope-paper[data-inner-entry]{--entry-rest:-1deg}
html[data-motion="on"] [data-inner-entrances="ready"] [data-inner-entry]{opacity:1;translate:0 0;transform:rotate(var(--entry-rest));transition:opacity .65s var(--ease),transform .85s cubic-bezier(.18,.78,.2,1);transition-delay:var(--entry-delay,0ms)}
html[data-motion="on"] [data-inner-entrances="ready"] [data-inner-entry]:not([data-inner-seen="true"]){opacity:0;transform:translate3d(var(--entry-x),var(--entry-y),0) rotate(var(--entry-turn))}
html[data-motion="on"] [data-inner-entrances="ready"] [data-inner-entry]:focus-within{opacity:1;transform:rotate(var(--entry-rest));transition:none}
html[data-motion="paused"] [data-inner-entry]{opacity:1;translate:0 0}
html[data-motion="on"] .page-hero-copy>:is(.eyebrow,h1,.page-lead,.button,.page-jumps){animation:inner-hero-enter .8s both var(--ease)}
html[data-motion="on"] .page-hero h1{animation-delay:.06s}
html[data-motion="on"] .page-hero .page-lead{animation-delay:.12s}
html[data-motion="on"] .page-hero .button{animation-delay:.18s}
html[data-motion="on"] .page-hero .page-jumps{animation-delay:.22s}
@keyframes inner-hero-enter{from{opacity:0;translate:-2rem .4rem}to{opacity:1;translate:0 0}}
@media(hover:hover) and (pointer:fine){
 .offer-row>div{transition:translate .4s var(--ease)}
 html[data-motion="on"] .offer-row:hover>div{translate:.5rem 0}
 .related-links>a>span:first-child{transition:translate .35s var(--ease)}
 html[data-motion="on"] .related-links>a:hover>span:first-child{translate:.5rem 0}
}
@media(max-width:800px){
 .inner-art-scene{width:min(80%,22rem);margin-block:.5rem 1rem;justify-self:end;margin-right:3%}
 .stamp-scene{width:15rem;max-width:80%;margin-block:1.5rem 1rem}
 .stamp-scene .stamp-tourism{font-size:1.85rem}
 .stamp-scene .stamp-croatia{font-size:2.2rem}
 .art-label{font-size:1.3rem}
 .studio-strips>span{font-size:clamp(1.7rem,5.3vw,2.2rem)}
 .page-contact .inner-art-scene{width:14rem;max-width:72%;margin-block:0 1rem}
 .page-contact .art-label{font-size:1.1rem}
 [data-inner-entry]{--entry-x:2.5rem;--entry-y:1rem;--entry-turn:1deg}
 [data-inner-entry="left"]{--entry-x:-2.5rem;--entry-turn:-1deg}
 [data-inner-entry="up"]{--entry-x:0px;--entry-y:1.3rem;--entry-turn:0deg}
}
@media(max-width:500px){
 .inner-art-scene{width:82%;max-width:18rem;margin-block:1.5rem 1rem;margin-right:6%}
 .stamp-scene{width:13rem;max-width:78%}
 .stamp-scene .stamp-tourism{font-size:1.6rem}
 .stamp-scene .stamp-croatia{font-size:2rem}
 .art-label{font-size:1.15rem}
 .studio-strips>span{font-size:clamp(1.45rem,6.4vw,1.8rem)}
}
@media(prefers-reduced-motion:reduce){
 html:not([data-motion="on"]) [data-inner-entry]{opacity:1;translate:0 0}
 html:not([data-motion="on"]) .art-parallax{transform:none}
}