:root{--ink:#111;--paper:#f4f0e9;--orange:#f14a28;--green:#65d34e;--blue:#315fcb;--lav:#aa8fd4;--line:rgba(17,17,17,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.section-pad{padding:0 4vw}.topbar{position:fixed;z-index:100;top:0;left:0;right:0;height:88px;padding:18px 4vw;display:flex;align-items:center;justify-content:space-between;background:rgba(244,240,233,.78);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:.3s}.topbar.scrolled{border-color:var(--line)}.brand img{width:165px}.topbar nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}.pill{padding:12px 18px;border:1px solid #111;border-radius:99px}.pill:hover{background:#111;color:#fff}.hero{padding-top:145px}.hero-kicker,.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.hero-grid{display:grid;grid-template-columns:1fr 320px;gap:50px;align-items:end;margin-top:34px}.hero h1{font-family:'Space Grotesk';font-size:clamp(66px,10.2vw,166px);line-height:.78;letter-spacing:-.075em;margin:0;font-weight:700}.hero h1 span{color:var(--orange);font-style:italic}.hero-copy{padding-bottom:10px;font-size:18px;line-height:1.5}.hero-copy p{margin:0 0 36px}.text-link{border-bottom:1px solid}.hero-canvas{height:42vw;min-height:440px;max-height:660px;margin-top:48px;background:#111;position:relative;overflow:hidden}.shape{position:absolute;border-radius:50%;filter:blur(2px);mix-blend-mode:screen}.s1{width:44vw;height:44vw;background:var(--blue);left:-5vw;top:-13vw}.s2{width:36vw;height:36vw;background:var(--orange);right:4vw;bottom:-12vw}.s3{width:28vw;height:28vw;background:var(--green);left:38%;top:16%;border-radius:6%}.hero-word{position:absolute;color:#fff;font:700 clamp(56px,8vw,130px)/1 'Space Grotesk';letter-spacing:-.07em}.w1{left:4%;top:6%;transform:rotate(-5deg)}.w2{right:4%;top:43%;transform:rotate(7deg)}.w3{left:17%;bottom:4%;transform:rotate(-2deg)}.marquee{overflow:hidden;background:var(--orange);border-block:1px solid #111;padding:15px 0;font:700 22px 'Space Grotesk';white-space:nowrap}.marquee-track{display:flex;width:max-content;animation:marquee 20s linear infinite}.marquee-track span{padding-right:18px}@keyframes marquee{to{transform:translateX(-50%)}}.works{padding-top:120px;padding-bottom:130px}.section-head{display:grid;grid-template-columns:1.7fr .7fr;gap:70px;align-items:end;margin-bottom:70px}.section-head h2,.about h2{font:600 clamp(46px,6.5vw,100px)/.95 'Space Grotesk';letter-spacing:-.055em;margin:14px 0 0}.section-head h2 em{font-weight:500;color:var(--blue)}.section-head p{font-size:18px;line-height:1.6;margin:0}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px 24px}.project-wide{grid-column:1/-1}.project-image{height:54vw;max-height:800px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.project:not(.project-wide) .project-image{height:54vw;max-height:720px}.project-image img{width:78%;height:78%;object-fit:contain;transition:transform .5s cubic-bezier(.2,.7,.2,1)}.project:hover img{transform:scale(1.04) rotate(-1deg)}.project-wide .project-image img{width:74%;height:82%}.dark{background:#15171e}.lavender{background:#c8b4e6}.cream{background:#ded9d0}.green{background:#90dd65}.blue{background:#7ca4ef}.orange{background:#f2673d}.project-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:14px;padding-top:14px;border-top:1px solid #111;margin-top:12px}.project-meta span{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.project-meta span:last-child{text-align:right}.project-meta h3{font:600 22px 'Space Grotesk';margin:0;text-align:center}.services{background:#111;color:#f5f0e8;padding-top:110px;padding-bottom:100px}.light-head{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:60px}.service-row{display:grid;grid-template-columns:55px 1.2fr 1fr 40px;align-items:center;gap:24px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.25);transition:.25s}.service-row:hover{padding-left:15px;color:var(--green)}.service-row span{font-size:12px}.service-row h3{font:500 clamp(24px,3vw,44px) 'Space Grotesk';margin:0;letter-spacing:-.04em}.service-row p{margin:0;color:#c8c8c8;line-height:1.5}.service-row b{font-size:26px}.about{padding-top:120px;padding-bottom:140px}.about-title{margin-bottom:56px}.about-title h2 span{color:var(--green)}.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}.about-images{position:relative;min-height:720px}.about-images img{position:absolute;object-fit:cover}.img-a{width:72%;height:72%;left:0;top:0}.img-b{width:47%;height:55%;right:0;bottom:0;border:14px solid var(--paper)}.about-copy{padding-top:30px;display:flex;flex-direction:column;justify-content:space-between}.about-copy .big{font:500 clamp(30px,3.5vw,52px)/1.05 'Space Grotesk';letter-spacing:-.04em;margin:0 0 35px}.about-copy>p:not(.big){font-size:18px;line-height:1.6}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:70px}.stat-grid div{border-top:1px solid;padding-top:15px}.stat-grid strong{display:block;font:600 32px 'Space Grotesk';margin-bottom:8px}.stat-grid span{font-size:12px;line-height:1.35;display:block}.contact{background:var(--blue);color:white;padding-top:95px;padding-bottom:70px}.contact h2{font:600 clamp(50px,8vw,124px)/.88 'Space Grotesk';letter-spacing:-.065em;margin:28px 0 100px}.contact h2 a{display:inline-block;border-bottom:.05em solid}.contact h2 a:hover{color:var(--green)}.contact-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;border-top:1px solid rgba(255,255,255,.4);padding-top:22px}.contact-bottom span{display:block;font-size:11px;letter-spacing:.12em;margin-bottom:9px}.contact-bottom p,.contact-bottom a{margin:0;font-size:15px}footer{padding:24px 4vw;display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.08em}.cursor-dot{position:fixed;z-index:999;width:12px;height:12px;background:var(--orange);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:multiply;transition:width .2s,height .2s}
@media(max-width:900px){.topbar nav a:not(.pill){display:none}.brand img{width:130px}.hero-grid,.section-head,.about-grid{grid-template-columns:1fr}.hero-copy{max-width:560px}.hero-canvas{height:65vw}.section-head{gap:25px}.project-grid{grid-template-columns:1fr}.project-wide{grid-column:auto}.project .project-image,.project:not(.project-wide) .project-image{height:88vw}.project-meta{grid-template-columns:1fr auto}.project-meta h3{grid-row:1;grid-column:1/-1;text-align:left}.project-meta span:last-child{grid-column:2}.service-row{grid-template-columns:35px 1fr 26px}.service-row p{display:none}.about-images{min-height:620px}.contact-bottom{grid-template-columns:1fr 1fr}.cursor-dot{display:none}}@media(max-width:560px){.section-pad{padding-left:20px;padding-right:20px}.topbar{padding-left:20px;padding-right:20px;height:76px}.pill{padding:10px 13px}.hero{padding-top:110px}.hero h1{font-size:16vw}.hero-canvas{min-height:320px}.hero-word{font-size:15vw}.works{padding-top:80px}.section-head h2,.about h2{font-size:14vw}.project-grid{gap:50px}.project-meta{display:flex;flex-direction:column;gap:4px}.project-meta span:last-child{display:none}.services{padding-top:80px}.service-row h3{font-size:7.5vw}.about-images{min-height:430px}.stat-grid{grid-template-columns:1fr}.contact h2{font-size:14vw;margin-bottom:60px}.contact-bottom{grid-template-columns:1fr}footer{gap:20px;flex-wrap:wrap}}

/* DRAMATIC HERO BREAK-APART HOVER */
.hero-canvas{cursor:crosshair;isolation:isolate}
.hero-canvas .shape,
.hero-canvas .hero-word{
  will-change:transform,filter,opacity;
  transition:
    transform .78s cubic-bezier(.16,1,.3,1),
    filter .55s ease,
    opacity .45s ease;
}
.hero-canvas .shape{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
.hero-canvas .hero-word{transform-origin:center}

/* fixed base rotations so JS can add a much larger explosion on top */
.hero-canvas .w1{--base-rot:-5deg}
.hero-canvas .w2{--base-rot:7deg}
.hero-canvas .w3{--base-rot:-2deg}
.hero-canvas .w1,.hero-canvas .w2,.hero-canvas .w3{transform:rotate(var(--base-rot))}

.hero-canvas.is-exploded .s1{
  transform:translate3d(-13vw,-9vw,0) rotate(-24deg) scale(1.38);
  filter:blur(6px) saturate(1.25);
}
.hero-canvas.is-exploded .s2{
  transform:translate3d(12vw,10vw,0) rotate(31deg) scale(.72);
  filter:blur(9px) saturate(1.35);
}
.hero-canvas.is-exploded .s3{
  transform:translate3d(3vw,-12vw,0) rotate(42deg) scale(1.28);
  filter:blur(3px) saturate(1.15);
}
.hero-canvas.is-exploded .w1{
  transform:translate3d(-9vw,-8vw,0) rotate(-19deg) scale(1.16);
}
.hero-canvas.is-exploded .w2{
  transform:translate3d(10vw,-2vw,0) rotate(23deg) scale(.88);
}
.hero-canvas.is-exploded .w3{
  transform:translate3d(-3vw,9vw,0) rotate(-14deg) scale(1.22);
}

/* cursor-driven offset layered on top of the explosion */
.hero-canvas.is-exploded .s1{translate:calc(var(--mx,0) * -18px) calc(var(--my,0) * -14px)}
.hero-canvas.is-exploded .s2{translate:calc(var(--mx,0) * 22px) calc(var(--my,0) * 18px)}
.hero-canvas.is-exploded .s3{translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * 26px)}
.hero-canvas.is-exploded .w1{translate:calc(var(--mx,0) * -28px) calc(var(--my,0) * -20px)}
.hero-canvas.is-exploded .w2{translate:calc(var(--mx,0) * 34px) calc(var(--my,0) * -14px)}
.hero-canvas.is-exploded .w3{translate:calc(var(--mx,0) * -16px) calc(var(--my,0) * 32px)}

/* slight jitter feel while exploded */
.hero-canvas.is-exploded .hero-word{filter:drop-shadow(7px 8px 0 rgba(241,74,40,.16))}

@media (prefers-reduced-motion:reduce){
  .hero-canvas .shape,.hero-canvas .hero-word{transition:none!important;translate:0 0!important}
}


/* MULTI-PAGE EXTENSIONS */
.page-main{padding-top:88px}.page-hero{padding:86px 4vw 70px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{display:block;margin-bottom:22px}.page-hero h1{font:700 clamp(70px,12vw,190px)/.78 'Space Grotesk';letter-spacing:-.075em;margin:0;max-width:1200px}.page-hero h1 em{color:var(--orange);font-style:italic}.page-hero-copy{display:grid;grid-template-columns:1fr 420px;gap:70px;align-items:end;margin-top:46px}.page-hero-copy p{font-size:20px;line-height:1.55;margin:0}
.home-work-preview{padding-top:110px;padding-bottom:110px}.home-work-preview .project-grid{margin-top:60px}.home-work-preview .more-work{display:flex;justify-content:center;margin-top:70px}.big-pill{display:inline-block;border:1px solid;padding:16px 24px;border-radius:100px;font-weight:700}.big-pill:hover{background:#111;color:#fff}
.split-cta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #111}.split-cta a{padding:70px 4vw;font:600 clamp(34px,5vw,76px)/.95 'Space Grotesk';letter-spacing:-.05em;min-height:280px;display:flex;align-items:flex-end;transition:.25s}.split-cta a:first-child{background:var(--green)}.split-cta a:last-child{background:var(--orange)}.split-cta a:hover{padding-left:5vw}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 55px}.filter-btn{appearance:none;border:1px solid #111;background:transparent;border-radius:100px;padding:10px 16px;font:600 13px 'DM Sans';cursor:pointer}.filter-btn.active,.filter-btn:hover{background:#111;color:white}.work-all{padding-top:70px;padding-bottom:120px}
.service-page{background:#111;color:#f5f0e8}.service-page .topbar{background:rgba(17,17,17,.82);color:white}.service-page .topbar .brand img{filter:invert(1)}.service-page .pill{border-color:#fff}.service-page .page-hero{border-color:rgba(255,255,255,.2)}.service-detail-list{padding:0 4vw 110px}.service-detail{display:grid;grid-template-columns:70px 1fr 1fr;gap:40px;padding:55px 0;border-top:1px solid rgba(255,255,255,.25)}.service-detail:last-child{border-bottom:1px solid rgba(255,255,255,.25)}.service-detail h2{font:500 clamp(34px,5vw,72px)/.95 'Space Grotesk';letter-spacing:-.05em;margin:0}.service-detail p{font-size:17px;line-height:1.65;color:#ccc;margin:0}.service-tags{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}.service-tags span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:1px solid #555;border-radius:100px;padding:8px 10px}
.studio-story{padding-top:80px;padding-bottom:120px}.studio-lead{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.studio-lead .big{font:500 clamp(34px,4.4vw,70px)/1.03 'Space Grotesk';letter-spacing:-.05em;margin:0}.studio-lead .copy{font-size:18px;line-height:1.7}.studio-photo-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:20px;margin-top:80px}.studio-photo-grid img{width:100%;height:720px;object-fit:cover}.studio-photo-grid img:last-child{height:520px;margin-top:150px}.principles{background:var(--green);padding-top:100px;padding-bottom:110px}.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:55px}.principle{border-top:1px solid #111;padding-top:18px}.principle strong{font:600 22px 'Space Grotesk'}.principle p{line-height:1.55}
.contact-page{background:var(--blue);color:white;min-height:100vh}.contact-page .topbar{background:rgba(49,95,203,.8);color:white}.contact-page .topbar .brand img{filter:invert(1)}.contact-page .pill{border-color:white}.contact-page .page-hero{border-color:rgba(255,255,255,.28)}.contact-page .page-hero h1{font-size:clamp(68px,10vw,155px)}.contact-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.3);margin:0 4vw 90px}.contact-card{background:var(--blue);padding:38px;min-height:180px}.contact-card span{display:block;font-size:11px;letter-spacing:.12em;margin-bottom:24px}.contact-card a,.contact-card p{font:500 clamp(24px,3vw,46px)/1.05 'Space Grotesk';letter-spacing:-.04em;margin:0}.contact-card a:hover{color:var(--green)}
.project-detail-hero{padding:70px 4vw 45px}.project-detail-hero h1{font:700 clamp(62px,10vw,150px)/.82 'Space Grotesk';letter-spacing:-.07em;margin:18px 0 40px}.project-detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid;padding-top:17px}.project-detail-meta span{font-size:11px;text-transform:uppercase;letter-spacing:.1em}.project-detail-meta strong{display:block;font-size:15px;margin-top:8px;text-transform:none;letter-spacing:0}.project-cover{margin:0 4vw;height:72vh;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden}.project-cover img{width:80%;height:82%;object-fit:contain}.project-intro{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-top:90px;padding-bottom:110px}.project-intro h2{font:600 clamp(40px,5vw,72px)/.98 'Space Grotesk';letter-spacing:-.05em;margin:0}.project-intro p{font-size:18px;line-height:1.7;margin:0}.next-project{display:block;background:var(--orange);padding:70px 4vw}.next-project span{font-size:11px;text-transform:uppercase;letter-spacing:.1em}.next-project strong{display:block;font:600 clamp(48px,7vw,110px)/.9 'Space Grotesk';letter-spacing:-.06em;margin-top:15px}.next-project:hover strong{transform:translateX(12px)}.next-project strong{transition:.25s}
@media(max-width:900px){.page-hero-copy,.studio-lead,.service-detail,.project-intro{grid-template-columns:1fr}.split-cta{grid-template-columns:1fr}.principles-grid{grid-template-columns:1fr}.studio-photo-grid{grid-template-columns:1fr}.studio-photo-grid img,.studio-photo-grid img:last-child{height:70vw;margin:0}.contact-cards{grid-template-columns:1fr}.project-detail-meta{grid-template-columns:1fr 1fr}.page-main{padding-top:76px}}

/* =========================================================
   PRNT V3 — EXPERIMENTAL / INTERACTIVE LAYER
   ========================================================= */
.dark-site{background:#050505;color:#f3f0e9}.dark-site .page-main{padding-top:0}.topbar-dark{height:76px;background:rgba(5,5,5,.72)!important;color:#f3f0e9;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);padding:15px 3vw}.topbar-dark nav{gap:clamp(18px,4vw,64px);font-size:12px;letter-spacing:.08em}.topbar-dark nav a{position:relative}.topbar-dark nav a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:#64d558;transition:.25s}.topbar-dark nav a:hover:after{width:100%}.brand-text{font:700 34px/1 'Space Grotesk';letter-spacing:-.07em;color:#275df4}.nav-dot{width:12px;height:12px;border-radius:50%;background:#64d558;box-shadow:0 0 0 0 rgba(100,213,88,.5);animation:navPulse 2.1s infinite}@keyframes navPulse{50%{box-shadow:0 0 0 9px rgba(100,213,88,0)}}
.home-main{background:#050505}.hero-v3{position:relative;min-height:760px;height:min(88vh,920px);padding:118px 3vw 60px;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(255,255,255,.08)}.hero-side-note{position:absolute;top:132px;left:3vw;color:#58d450;font:500 11px/1.45 'DM Sans';letter-spacing:.08em;z-index:3}.hero-title-wrap{position:relative;z-index:3;width:min(970px,68vw);padding-top:78px}.hero-title-v3{margin:0;font:700 clamp(72px,10.5vw,172px)/.88 'Space Grotesk';letter-spacing:-.075em;text-transform:uppercase}.hero-title-v3 .title-line{display:block;white-space:nowrap;padding-bottom:.07em}.hero-title-v3 .accent-blue{color:#275df4}.hero-intro-v3{position:absolute;left:27%;bottom:22px;width:370px;margin:0;font-size:17px;line-height:1.5;color:#c8c8c8}.hero-arrow{position:absolute;right:6vw;top:31%;width:64px;height:64px;background:#f3f0e9;color:#050505;display:grid;place-items:center;font-size:34px;z-index:5;transition:.3s cubic-bezier(.16,1,.3,1)}.hero-arrow:hover{transform:rotate(45deg) scale(1.1);background:#f24a27}.scroll-cue{position:absolute;left:3vw;bottom:25px;font:500 10px 'DM Sans';letter-spacing:.08em;color:#ddd;z-index:5}.scroll-cue i{display:inline-block;width:48px;height:1px;background:#58d450;margin-left:10px;vertical-align:middle;transform-origin:left;animation:scanLine 1.7s ease-in-out infinite}@keyframes scanLine{50%{transform:scaleX(.25)}}
.shard-field{position:absolute;z-index:2;right:-2vw;top:60px;width:48vw;height:680px;pointer-events:auto;perspective:800px}.shard{position:absolute;width:var(--w);height:var(--h);left:var(--x);top:var(--y);background:var(--c);clip-path:polygon(var(--poly));transform:rotate(var(--r)) translate3d(0,0,0);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s,opacity .4s;will-change:transform}.shard-field:hover .shard{transform:translate3d(var(--tx),var(--ty),0) rotate(var(--rr)) scale(var(--s));filter:drop-shadow(0 18px 20px rgba(0,0,0,.5)) saturate(1.2)}
.triangle-ribbon{height:58px;background:#275df4;display:flex;align-items:stretch;overflow:visible;position:relative;z-index:12;cursor:crosshair}.triangle-ribbon.compact{height:42px}.tri-unit{position:relative;flex:1 0 42px;height:100%;transform:translate3d(0,0,0) rotate(0);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .3s;will-change:transform}.tri-unit:before,.tri-unit:after{content:"";position:absolute;inset:0}.tri-unit:before{background:#f24a27;clip-path:polygon(0 0,52% 18%,52% 82%,0 100%)}.tri-unit:after{background:#58d450;clip-path:polygon(52% 18%,100% 0,100% 100%,52% 82%)}.tri-unit i{position:absolute;inset:0;background:#275df4;clip-path:polygon(0 0,52% 18%,100% 0,52% 50%)}.triangle-ribbon.is-active .tri-unit{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--dr)) scale(var(--ds));filter:drop-shadow(0 12px 8px rgba(0,0,0,.35))}.triangle-ribbon.is-active{z-index:30}
.portal-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:24px 3vw 100px;background:#050505;gap:0}.portal-card{min-height:250px;border-left:1px solid rgba(255,255,255,.22);padding:28px 28px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden}.portal-card:first-child{border-left:none}.portal-card span{font:500 18px 'Space Grotesk'}.portal-card h2{font:600 clamp(34px,3.2vw,58px)/1 'Space Grotesk';letter-spacing:-.055em;margin:12px 0 8px}.portal-card p{color:#aaa;max-width:190px;font-size:14px;line-height:1.4;margin:0}.portal-card b{margin-top:auto;font-size:10px;letter-spacing:.08em}.portal-card:before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:currentColor;right:-80px;top:-80px;opacity:.11;transform:scale(.2);transition:.55s cubic-bezier(.16,1,.3,1)}.portal-card:hover:before{transform:scale(2.5)}.p-green{color:#58d450}.p-blue{color:#275df4}.p-orange{color:#f24a27}
.home-work-v3{padding:110px 3vw 130px;background:#0c0c0c}.work-v3-head{display:grid;grid-template-columns:160px 1fr auto;align-items:end;gap:40px;margin-bottom:70px}.work-v3-head>span,.work-v3-head>a{font-size:11px;letter-spacing:.1em}.work-v3-head h2{font:600 clamp(50px,7vw,108px)/.92 'Space Grotesk';letter-spacing:-.065em;margin:0}.work-v3-head h2 em{font-style:normal;color:#58d450}.magnetic-projects{display:flex;flex-direction:column}.magnetic-project{position:relative;border-top:1px solid rgba(255,255,255,.22);padding:23px 0 28px;display:grid;grid-template-columns:180px 1fr 240px;align-items:center;gap:25px}.magnetic-project:last-child{border-bottom:1px solid rgba(255,255,255,.22)}.magnetic-project span{font-size:10px;letter-spacing:.09em}.magnetic-project h3{font:600 clamp(34px,5vw,76px)/1 'Space Grotesk';letter-spacing:-.055em;margin:0;transition:.35s}.magnetic-project img{position:absolute;width:260px;height:170px;object-fit:contain;right:3vw;top:50%;transform:translateY(-50%) rotate(-5deg) scale(.65);opacity:0;pointer-events:none;transition:.35s cubic-bezier(.16,1,.3,1);z-index:5}.magnetic-project:hover h3{transform:translateX(22px);color:#275df4}.magnetic-project:hover img{opacity:1;transform:translateY(-50%) rotate(4deg) scale(1)}
.giant-cta{background:#58d450;color:#050505;padding:65px 3vw 82px}.giant-cta>span{font-size:11px;letter-spacing:.1em}.giant-cta a{display:block;font:700 clamp(64px,10vw,160px)/.82 'Space Grotesk';letter-spacing:-.075em;margin-top:28px;transition:.3s}.giant-cta a:hover{letter-spacing:-.04em}.footer-dark{background:#050505;color:#aaa;border-top:1px solid rgba(255,255,255,.12)}
.cursor-ring{position:fixed;z-index:998;width:42px;height:42px;border:1px solid rgba(255,255,255,.45);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}.dark-site .cursor-dot{background:#58d450;mix-blend-mode:normal}.dark-site a:hover~.cursor-dot{transform:scale(1.5)}
/* WORK V3 */
.work-hero-v3{padding:150px 3vw 75px;display:grid;grid-template-columns:1fr minmax(260px,420px);column-gap:60px;align-items:end;min-height:620px}.work-hero-v3 .eyebrow{grid-column:1/-1;color:#58d450;margin-bottom:28px}.work-hero-v3 h1{margin:0;font:700 clamp(90px,14vw,220px)/.84 'Space Grotesk';letter-spacing:-.075em}.work-hero-v3 h1 em{color:#f24a27;font-style:normal}.work-hero-v3 p{font-size:17px;line-height:1.6;color:#bbb;margin:0 0 18px}.work-all-v3{padding:80px 3vw 120px}.dark-filter .filter-btn{color:#f3f0e9;border-color:rgba(255,255,255,.3);background:transparent}.dark-filter .filter-btn.active,.dark-filter .filter-btn:hover{background:#f3f0e9;color:#050505}.project-wall{display:grid;grid-template-columns:repeat(12,1fr);gap:22px 18px;align-items:start}.wall-card{display:block;grid-column:span 4;margin-bottom:42px;transition:opacity .25s}.wall-card.size-xl{grid-column:span 7}.wall-card.size-l{grid-column:span 5}.wall-card.size-m{grid-column:span 4}.wall-img{height:390px;background:#101010;overflow:hidden;position:relative}.size-xl .wall-img{height:580px}.size-l .wall-img{height:460px}.wall-img img{width:100%;height:100%;object-fit:contain;padding:24px;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .5s}.wall-card:hover .wall-img img{transform:scale(1.08) rotate(var(--hover-rot,1deg));filter:saturate(1.15)}.wall-card span{display:block;margin-top:14px;font-size:9px;letter-spacing:.1em;color:#8d8d8d}.wall-card h2{font:600 clamp(24px,2.7vw,44px)/.95 'Space Grotesk';letter-spacing:-.05em;margin:6px 0 0;transition:.3s}.wall-card:hover h2{color:#58d450;transform:translateX(8px)}.wall-card.is-hidden{display:none}.wall-card:nth-child(3n+1){--hover-rot:-1.2deg}.wall-card:nth-child(3n+2){--hover-rot:1.6deg}
/* prevent Croatian diacritics from colliding in ALL display headings */
.hero-title-v3,.work-hero-v3 h1,.page-hero h1,.giant-cta a,.project-detail-hero h1,.section-head h2,.about h2{line-height:.9!important}.hero-title-v3 .title-line{padding-top:.025em;padding-bottom:.08em}
@media(max-width:900px){.topbar-dark nav{display:none}.hero-v3{height:auto;min-height:720px;padding-top:105px}.hero-side-note{top:105px}.hero-title-wrap{width:100%;padding-top:95px}.hero-title-v3{font-size:15vw}.hero-intro-v3{position:static;width:min(520px,80%);margin:35px 0 0 25%}.shard-field{opacity:.72;width:70vw;right:-25vw;top:160px}.portal-grid{grid-template-columns:1fr 1fr}.portal-card:nth-child(3){border-left:none}.work-v3-head{grid-template-columns:1fr}.magnetic-project{grid-template-columns:1fr}.magnetic-project img{display:none}.work-hero-v3{grid-template-columns:1fr;padding-top:125px;min-height:550px}.work-hero-v3 h1{font-size:17vw}.work-hero-v3 p{max-width:600px;margin-top:30px}.project-wall{display:block}.wall-card,.wall-card.size-xl,.wall-card.size-l,.wall-card.size-m{margin-bottom:55px}.wall-img,.size-xl .wall-img,.size-l .wall-img{height:65vw;min-height:360px}}
@media(max-width:560px){.brand-text{font-size:28px}.hero-v3{min-height:650px;padding-left:20px;padding-right:20px}.hero-side-note{left:20px}.hero-title-v3{font-size:17vw;line-height:.94!important}.hero-intro-v3{margin-left:0;width:86%;font-size:15px}.hero-arrow{right:20px;top:auto;bottom:95px;width:52px;height:52px}.shard-field{width:80vw;right:-38vw}.triangle-ribbon{height:42px}.tri-unit{flex-basis:30px}.portal-grid{grid-template-columns:1fr;padding-left:20px;padding-right:20px}.portal-card{border-left:none;border-top:1px solid rgba(255,255,255,.2)}.work-v3-head h2{font-size:14vw}.giant-cta a{font-size:16vw;line-height:.9}.work-hero-v3{padding-left:20px;padding-right:20px}.work-all-v3{padding-left:20px;padding-right:20px}.wall-img,.size-xl .wall-img,.size-l .wall-img{height:82vw;min-height:280px}.cursor-ring{display:none}}

/* =========================================================
   V5 / PRNT SYMBOL UI — clean studio + intelligent motion
   ========================================================= */
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;padding:10px 14px;background:#f3f0e9;color:#050505;transform:translateY(-150%);transition:.2s}.skip-link:focus{transform:none}
.symbol-home{background:#060606;color:#f3f0e9}.symbol-main{padding-top:0;background:#060606}.symbol-home.is-loading{overflow:hidden}.symbol-home .symbol-topbar{opacity:0;transform:translateY(-12px);transition:opacity .55s ease,transform .55s ease}.symbol-home.is-ready .symbol-topbar{opacity:1;transform:none}.symbol-topbar{background:rgba(6,6,6,.72);backdrop-filter:blur(15px);height:78px;padding:16px 3vw;border-bottom:1px solid rgba(255,255,255,.12)}.symbol-topbar.scrolled{background:rgba(6,6,6,.92)}.symbol-topbar .brand-text{color:#f3f0e9;font-size:31px}.symbol-topbar nav{gap:24px}.nav-cta{font-size:11px;letter-spacing:.07em;border:1px solid rgba(255,255,255,.45);padding:10px 14px;transition:.25s}.nav-cta:hover{background:#f3f0e9;color:#060606}

.intro-loader{position:fixed;inset:0;z-index:2000;background:#060606;color:#f3f0e9;display:grid;place-items:center;transition:opacity .6s cubic-bezier(.16,1,.3,1),visibility .6s}.is-ready .intro-loader{opacity:0;visibility:hidden;pointer-events:none}.intro-symbols{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.2vw,40px);font:500 clamp(54px,8vw,118px)/1 'Space Grotesk';letter-spacing:-.08em}.intro-symbol{display:block;opacity:0;transform:translateY(16px) scale(.8);animation:introSymbol .48s cubic-bezier(.16,1,.3,1) forwards}.intro-symbol:nth-child(1){animation-delay:.10s}.intro-symbol:nth-child(2){animation-delay:.28s}.intro-symbol:nth-child(3){animation-delay:.46s}.intro-symbol:nth-child(4){animation-delay:.64s}.intro-symbol:nth-child(2){color:#315fcb}.intro-symbol:nth-child(3){color:#65d34e}.intro-symbol:nth-child(4){color:#f14a28}@keyframes introSymbol{to{opacity:1;transform:none}}.intro-meta{position:absolute;left:3vw;right:3vw;bottom:26px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;color:#777}

.symbol-ui{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .6s ease .1s}.is-ready .symbol-ui{opacity:1}.ui-symbol{position:absolute;font:500 27px/1 'Space Grotesk';transition:transform .45s cubic-bezier(.16,1,.3,1),color .25s}.ui-line{left:3vw;top:112px;color:#f3f0e9}.ui-circle{right:3vw;top:112px;color:#315fcb}.ui-square{left:3vw;bottom:24px;color:#65d34e}.ui-triangle{right:3vw;bottom:24px;color:#f14a28}

.symbol-hero{position:relative;min-height:100svh;padding:150px 8vw 56px 9vw;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.14)}.hero-index{position:absolute;left:9vw;top:122px;font-size:10px;letter-spacing:.13em;color:#7b7b7b}.symbol-hero h1{margin:0;max-width:1120px;font:700 clamp(74px,12.4vw,188px)/.89 'Space Grotesk';letter-spacing:-.078em;text-transform:uppercase;position:relative;z-index:2}.symbol-hero h1 span{display:block;padding:.045em 0 .075em}.symbol-hero h1 span:nth-child(2){margin-left:14vw}.symbol-hero .hero-outline{color:transparent;-webkit-text-stroke:1.5px #f3f0e9;transition:color .35s ease,-webkit-text-stroke-color .35s ease}.symbol-hero:hover .hero-outline{color:#f3f0e9;-webkit-text-stroke-color:#f3f0e9}.symbol-hero-bottom{display:grid;grid-template-columns:minmax(250px,430px) auto;justify-content:space-between;align-items:end;gap:30px;margin:54px 0 0 14vw;position:relative;z-index:3}.symbol-hero-bottom p{margin:0;color:#a9a9a9;font-size:16px;line-height:1.55}.smart-link{display:flex;align-items:center;gap:28px;border-bottom:1px solid rgba(255,255,255,.65);padding:0 2px 9px;font-size:12px;letter-spacing:.07em}.smart-link b{font-size:22px;font-weight:400;transition:transform .3s}.smart-link:hover b{transform:translate(4px,-4px)}
.print-guides{position:absolute;inset:96px 4vw 34px;pointer-events:none;opacity:0;transition:opacity .35s}.symbol-hero:hover .print-guides{opacity:.5}.crop{position:absolute;width:28px;height:28px}.crop:before,.crop:after{content:"";position:absolute;background:#fff}.crop:before{width:28px;height:1px}.crop:after{height:28px;width:1px}.crop.tl{left:0;top:0}.crop.tr{right:0;top:0;transform:rotate(90deg)}.crop.bl{left:0;bottom:0;transform:rotate(-90deg)}.crop.br{right:0;bottom:0;transform:rotate(180deg)}.reg{position:absolute;font:400 22px 'DM Sans';color:#65d34e}.r1{left:47%;top:5%}.r2{right:18%;bottom:10%}

.selected-clean{background:#f1eee7;color:#111;padding:110px 3vw 130px}.clean-section-head{display:grid;grid-template-columns:150px 1fr auto;gap:38px;align-items:end;margin-bottom:70px}.clean-section-head>span,.clean-section-head>a{font-size:10px;letter-spacing:.12em}.clean-section-head h2{font:600 clamp(52px,7vw,108px)/.98 'Space Grotesk';letter-spacing:-.065em;margin:0}.clean-section-head h2 em{font-style:normal;color:#315fcb}.clean-project-list{display:flex;flex-direction:column;gap:100px}.clean-project{display:block}.clean-project-media{position:relative;height:min(68vw,760px);overflow:hidden;background:#151515}.clean-project-media img{width:100%;height:100%;object-fit:contain;padding:5vw;transition:transform .7s cubic-bezier(.16,1,.3,1),filter .35s}.clean-project:hover img{transform:scale(1.025)}.clean-project-row{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:baseline;padding:15px 0;border-top:1px solid #111}.clean-project-row span,.clean-project-row b{font-size:10px;letter-spacing:.1em;font-weight:500}.clean-project-row b{text-align:right}.clean-project-row h3{margin:0;font:600 clamp(26px,3.3vw,52px)/1 'Space Grotesk';letter-spacing:-.045em;text-align:center}.cmyk-card .clean-project-media:before,.cmyk-card .clean-project-media:after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity .2s,transform .28s}.cmyk-card .clean-project-media:before{background:rgba(0,185,255,.14)}.cmyk-card .clean-project-media:after{background:rgba(255,35,110,.14)}.cmyk-card:hover .clean-project-media:before{opacity:1;transform:translate(-4px,2px)}.cmyk-card:hover .clean-project-media:after{opacity:1;transform:translate(4px,-2px)}

.studio-strip{background:#060606;color:#f3f0e9;padding:76px 3vw 105px;border-top:1px solid rgba(255,255,255,.14)}.studio-strip>span{font-size:10px;letter-spacing:.12em;color:#777}.studio-strip-list{margin-top:30px;border-top:1px solid rgba(255,255,255,.18)}.studio-strip-list a{display:block;font:600 clamp(44px,7vw,106px)/1 'Space Grotesk';letter-spacing:-.06em;padding:16px 0 20px;border-bottom:1px solid rgba(255,255,255,.18);transition:padding-left .3s cubic-bezier(.16,1,.3,1),color .25s}.studio-strip-list a:hover{padding-left:3vw;color:#65d34e}
.clean-cta{background:#315fcb;color:white;padding:85px 3vw 110px}.clean-cta>span{font-size:10px;letter-spacing:.12em}.clean-cta h2{font:600 clamp(56px,8vw,126px)/.97 'Space Grotesk';letter-spacing:-.065em;margin:32px 0 0}.clean-cta h2 a{border-bottom:.045em solid currentColor}.clean-footer{padding-left:3vw;padding-right:3vw}

/* shared intelligent symbol language on inner pages */
body:not(.symbol-home).dark-site:before{content:"○";position:fixed;right:3vw;bottom:24px;z-index:80;color:#315fcb;font:500 25px/1 'Space Grotesk';pointer-events:none;opacity:.85}body:not(.symbol-home).dark-site:after{content:"△";position:fixed;left:3vw;bottom:24px;z-index:80;color:#f14a28;font:500 25px/1 'Space Grotesk';pointer-events:none;opacity:.85}

@media(max-width:900px){.symbol-topbar nav{display:none}.nav-cta{display:none}.symbol-hero{padding-left:7vw;padding-right:7vw}.hero-index{left:7vw}.symbol-hero h1{font-size:15vw;line-height:.94}.symbol-hero h1 span:nth-child(2){margin-left:8vw}.symbol-hero-bottom{margin-left:8vw;grid-template-columns:1fr}.clean-section-head{grid-template-columns:1fr}.clean-project-row{grid-template-columns:1fr auto}.clean-project-row h3{grid-column:1/-1;grid-row:1;text-align:left}.clean-project-row span{grid-row:2}.clean-project-row b{grid-row:2}.ui-symbol{font-size:22px}}
@media(max-width:560px){.symbol-hero{padding:130px 20px 45px;min-height:92svh}.hero-index{left:20px;top:105px}.symbol-hero h1{font-size:17.5vw;letter-spacing:-.07em;line-height:.98}.symbol-hero h1 span:nth-child(2){margin-left:0}.symbol-hero-bottom{margin:42px 0 0;gap:28px}.symbol-hero-bottom p{font-size:14px}.ui-line,.ui-square{left:20px}.ui-circle,.ui-triangle{right:20px}.ui-line,.ui-circle{top:92px}.selected-clean,.studio-strip,.clean-cta{padding-left:20px;padding-right:20px}.clean-section-head h2{font-size:14vw}.clean-project-list{gap:70px}.clean-project-media{height:86vw}.clean-project-row{display:flex;flex-direction:column;gap:6px}.clean-project-row b{display:none}.clean-project-row h3{font-size:8vw}.studio-strip-list a{font-size:13vw}.clean-cta h2{font-size:14vw}.intro-meta{left:20px;right:20px}.intro-symbols{gap:14px}}
@media(prefers-reduced-motion:reduce){.intro-loader{display:none}.symbol-home.is-loading{overflow:auto}.symbol-home .symbol-topbar,.symbol-ui{opacity:1;transform:none}.intro-symbol{animation:none;opacity:1;transform:none}.magnetic{transform:none!important}.cmyk-card .clean-project-media:before,.cmyk-card .clean-project-media:after{display:none}}

/* ==========================================================
   V6 / EDITORIAL LANDING
   Keeps the V5 intro + symbol system, replaces only homepage.
   ========================================================== */
.editorial-home{background:#070707;color:#f3f0e9}
.editorial-home .symbol-main{background:#070707}
.editorial-hero{min-height:100svh;padding:124px 6vw 54px;display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,.16);overflow:hidden}
.editorial-hero-grid{width:100%;display:grid;grid-template-columns:1.25fr .75fr;grid-template-rows:auto 1fr auto;column-gap:6vw;position:relative}
.editorial-kicker{grid-column:1/-1;display:flex;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.17);font-size:10px;letter-spacing:.14em;color:#858585}
.editorial-hero h1{grid-column:1/-1;align-self:center;margin:38px 0 54px;font:600 clamp(76px,14.5vw,220px)/.78 'Space Grotesk';letter-spacing:-.085em;text-transform:uppercase}
.editorial-hero h1 span{display:block;white-space:nowrap}
.editorial-hero h1 .hero-prnt{font-size:.42em;line-height:1.15;letter-spacing:-.05em;margin-bottom:.22em;color:#66d34f}
.editorial-hero h1 .hero-small{padding-left:11vw}
.editorial-hero h1 .hero-indent{padding-left:2vw;font-size:.72em;line-height:.92}
.editorial-intro{grid-column:1;align-self:end;display:grid;grid-template-columns:minmax(230px,460px) auto;gap:34px;align-items:end;padding-top:18px;border-top:1px solid rgba(255,255,255,.17)}
.editorial-intro p{margin:0;color:#a5a5a5;font-size:15px;line-height:1.55;max-width:420px}
.edition-note{grid-column:2;align-self:end;justify-self:end;display:flex;gap:12px;align-items:flex-start;color:#666}.edition-note span{font-size:9px;letter-spacing:.12em;margin-top:5px}.edition-note strong{font:500 56px/1 'Space Grotesk';letter-spacing:-.07em;color:#f3f0e9}

.project-index{background:#efede6;color:#0a0a0a;padding:106px 3vw 130px}
.project-index-head{display:grid;grid-template-columns:145px 1fr auto;gap:36px;align-items:end;margin-bottom:58px}
.project-index-head>span,.project-index-head>a{font-size:10px;letter-spacing:.12em}.project-index-head h2{margin:0;font:600 clamp(48px,6.2vw,92px)/.95 'Space Grotesk';letter-spacing:-.062em}
.project-index-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:5vw;align-items:start}
.project-index-list{border-top:1px solid #171717}
.project-index-row{display:grid;grid-template-columns:36px minmax(180px,1.25fr) minmax(140px,.8fr) 60px 24px;gap:16px;align-items:center;min-height:102px;border-bottom:1px solid #171717;transition:padding .35s cubic-bezier(.16,1,.3,1),opacity .25s}
.project-index-row .pi-no,.project-index-row .pi-type,.project-index-row .pi-year{font-size:9px;letter-spacing:.11em}.project-index-row .pi-type{color:#6d6d6d}.project-index-row h3{margin:0;font:600 clamp(24px,2.8vw,44px)/1 'Space Grotesk';letter-spacing:-.045em}.project-index-row b{font-size:20px;font-weight:400;transition:transform .3s}.project-index-row:hover,.project-index-row:focus-visible{padding-left:12px}.project-index-row:hover b,.project-index-row:focus-visible b{transform:translate(3px,-3px)}
.project-live-preview{position:sticky;top:112px;height:min(64vh,680px);background:#111;overflow:hidden;display:block}
.project-live-preview img{width:100%;height:100%;object-fit:contain;padding:4.2vw;transition:opacity .18s ease,transform .55s cubic-bezier(.16,1,.3,1);background:#161616;filter:none!important}
.project-live-preview:hover img{transform:scale(1.015)}
.preview-label{position:absolute;left:16px;bottom:14px;font-size:9px;letter-spacing:.12em;color:#fff;background:#070707;padding:7px 9px}

/* Explicitly remove V5 CMYK / colour-shift treatment on homepage works. */
.editorial-home .cmyk-card .clean-project-media:before,.editorial-home .cmyk-card .clean-project-media:after{display:none!important}
.editorial-home .clean-project-media img,.editorial-home .project-live-preview img{filter:none!important}

.editorial-services{display:grid;grid-template-columns:150px 1fr 1fr;gap:38px;background:#070707;color:#f3f0e9;padding:105px 3vw 120px;border-bottom:1px solid rgba(255,255,255,.17)}
.editorial-services-label{font-size:10px;letter-spacing:.12em;color:#777}.editorial-services-copy p{margin:0;font:500 clamp(30px,4vw,61px)/1.05 'Space Grotesk';letter-spacing:-.05em}.editorial-services-links{border-top:1px solid rgba(255,255,255,.2)}.editorial-services-links a{display:flex;justify-content:space-between;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px;letter-spacing:.08em}.editorial-services-links a:after{content:'○';opacity:0;transform:translateX(-8px);transition:.25s}.editorial-services-links a:hover:after{opacity:1;transform:none}
.editorial-cta{background:#efede6;color:#0a0a0a;padding:100px 3vw 120px}.editorial-cta>span{font-size:10px;letter-spacing:.12em}.editorial-cta h2{font:600 clamp(60px,9vw,142px)/.87 'Space Grotesk';letter-spacing:-.075em;margin:48px 0 56px}.editorial-cta h2 em{font-style:normal;color:#315fcb}.editorial-cta .smart-link{width:max-content;border-color:#0a0a0a}

@media(max-width:900px){
  .editorial-hero{padding-left:7vw;padding-right:7vw}.editorial-hero-grid{grid-template-columns:1fr}.editorial-hero h1{font-size:17vw;line-height:.82}.editorial-hero h1 .hero-small{padding-left:5vw}.editorial-intro{grid-column:1;grid-template-columns:1fr;margin-bottom:18px}.edition-note{display:none}
  .project-index-head{grid-template-columns:1fr}.project-index-layout{grid-template-columns:1fr}.project-live-preview{position:relative;top:auto;height:58vw;grid-row:1;margin-bottom:20px}.project-index-row{grid-template-columns:34px 1fr 30px}.project-index-row .pi-type,.project-index-row .pi-year{display:none}
  .editorial-services{grid-template-columns:1fr}.editorial-services-copy{margin:20px 0 30px}
}
@media(max-width:560px){
  .editorial-hero{padding:112px 20px 38px}.editorial-kicker span:last-child{display:none}.editorial-hero h1{font-size:18.5vw;line-height:.85;margin:30px 0 46px}.editorial-hero h1 .hero-prnt{font-size:.5em}.editorial-hero h1 .hero-small,.editorial-hero h1 .hero-indent{padding-left:0}.editorial-intro{gap:26px}.project-index,.editorial-services,.editorial-cta{padding-left:20px;padding-right:20px}.project-index-head h2{font-size:13vw}.project-live-preview{height:78vw}.project-index-row{min-height:80px}.project-index-row h3{font-size:7vw}.editorial-services-copy p{font-size:10vw}.editorial-cta h2{font-size:16vw}
}

/* ==========================================================
   V7 / LIGHT EDITORIAL LANDING
   Loader stays black. Homepage becomes paper-light after load.
   ========================================================== */
.light-home{background:#f3f0e9;color:#0a0a0a}
.light-home .symbol-main{background:#f3f0e9}
.light-home .symbol-topbar{background:rgba(243,240,233,.84);color:#0a0a0a;border-bottom-color:rgba(10,10,10,.12)}
.light-home .symbol-topbar.scrolled{background:rgba(243,240,233,.96)}
.light-home .symbol-topbar .brand-text{color:#0a0a0a}
.light-home .symbol-topbar nav a:after{background:#0a0a0a}
.light-home .nav-cta{border-color:rgba(10,10,10,.45)}
.light-home .nav-cta:hover{background:#0a0a0a;color:#f3f0e9}
.light-home .cursor-dot{background:#0a0a0a;mix-blend-mode:difference}
.light-home .cursor-ring{border-color:rgba(10,10,10,.4)}
.light-home .ui-line{color:#0a0a0a}

.light-editorial-hero{background:#f3f0e9;color:#0a0a0a;min-height:100svh;padding:124px 5vw 34px;border-bottom:1px solid rgba(10,10,10,.18)}
.light-hero-grid{grid-template-columns:minmax(180px,.48fr) minmax(0,1.52fr);grid-template-rows:auto 1fr auto;column-gap:5vw}
.light-editorial-hero .editorial-kicker{grid-column:1/-1;border-bottom-color:rgba(10,10,10,.18);color:#696969}
.light-hero-aside{grid-column:1;grid-row:2;align-self:center;display:flex;flex-direction:column;gap:26px;font-size:9px;letter-spacing:.13em;color:#777}
.light-hero-aside .aside-mark{font:400 clamp(60px,8vw,126px)/.65 'Space Grotesk';letter-spacing:-.08em;color:#315fcb;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.light-editorial-hero:hover .aside-mark{transform:rotate(45deg)}
.light-hero-copy{grid-column:2;grid-row:2;align-self:center;text-align:right;max-width:1220px;justify-self:end;width:100%;padding:7vh 0 4vh}
.hero-overline{margin:0 0 34px auto;font-size:10px;letter-spacing:.15em;color:#757575}
.light-hero-copy h1{margin:0;font:600 clamp(68px,10.8vw,174px)/.86 'Space Grotesk';letter-spacing:-.074em;text-transform:uppercase;text-align:right}
.light-hero-copy h1 span{display:block;white-space:nowrap;padding:.03em 0 .07em}
.light-hero-copy h1 span:nth-child(2){font-size:.69em;letter-spacing:-.06em}
.light-hero-copy h1 span:nth-child(3){color:#315fcb}
.light-hero-bottom{margin:48px 0 0 auto;padding-top:18px;border-top:1px solid rgba(10,10,10,.2);display:grid;grid-template-columns:minmax(250px,430px) auto;gap:42px;align-items:end;justify-content:end;text-align:left;max-width:790px}
.light-hero-bottom p{margin:0;font-size:14px;line-height:1.55;color:#575757}
.light-home .smart-link{border-color:rgba(10,10,10,.65)}
.light-hero-foot{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid rgba(10,10,10,.18);font-size:9px;letter-spacing:.13em;color:#777}

/* Keep the rest of the homepage predominantly light; use black only as text/structure. */
.light-home .project-index{background:#f8f6f1;color:#0a0a0a}
.light-home .editorial-services{background:#f3f0e9;color:#0a0a0a;border-top:1px solid rgba(10,10,10,.18);border-bottom:1px solid rgba(10,10,10,.18)}
.light-home .editorial-services-label{color:#777}
.light-home .editorial-services-links{border-top-color:rgba(10,10,10,.2)}
.light-home .editorial-services-links a{border-bottom-color:rgba(10,10,10,.2)}
.light-home .editorial-services-links a:after{color:#315fcb}
.light-home .editorial-cta{background:#f8f6f1;color:#0a0a0a;border-top:1px solid rgba(10,10,10,.18)}
.light-home .editorial-cta h2 em{color:#315fcb}
.light-home .footer-dark{background:#0a0a0a;color:#f3f0e9}

/* Never color-shift project imagery on this homepage. */
.light-home .project-live-preview img,.light-home .project-index img{filter:none!important}
.light-home .project-live-preview:before,.light-home .project-live-preview:after{display:none!important}

@media(max-width:900px){
  .light-hero-grid{grid-template-columns:1fr}
  .light-hero-aside{display:none}
  .light-hero-copy{grid-column:1;max-width:none;padding:9vh 0 5vh}
  .light-hero-copy h1{font-size:14vw}
  .light-hero-bottom{grid-template-columns:1fr;max-width:560px;gap:26px}
}
@media(max-width:560px){
  .light-editorial-hero{padding:112px 20px 26px;min-height:94svh}
  .light-hero-copy{padding:11vh 0 5vh}
  .hero-overline{font-size:8px;margin-bottom:22px}
  .light-hero-copy h1{font-size:15.4vw;line-height:.9;letter-spacing:-.065em}
  .light-hero-copy h1 span:nth-child(2){font-size:.73em}
  .light-hero-bottom{margin-top:34px}
  .light-hero-foot{padding-top:15px}
  .light-hero-foot span:first-child{display:none}
  .light-hero-foot{justify-content:flex-end}
}


/* V8 — unified paper system / one navigation / no black sections */
:root{
  --paper:#f4f0e9;
  --paper-2:#f8f6f1;
  --ink:#111111;
  --soft-line:rgba(17,17,17,.16);
}
html,body{background:var(--paper)!important;color:var(--ink)!important}
body,.page-main,.symbol-main,.home-main,.editorial-home,.light-home,.dark-site,.service-page,.contact-page{
  background:var(--paper)!important;
  color:var(--ink)!important;
}

/* exactly the same header on every page */
.topbar,.topbar-dark,.symbol-topbar,.unified-topbar,
.service-page .topbar,.contact-page .topbar,.light-home .symbol-topbar{
  position:fixed!important;
  top:0;left:0;right:0;
  height:80px!important;
  padding:0 4vw!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  gap:24px!important;
  background:rgba(244,240,233,.92)!important;
  color:var(--ink)!important;
  border-bottom:1px solid var(--soft-line)!important;
  backdrop-filter:blur(14px)!important;
}
.unified-topbar .brand-text,.topbar .brand-text,.symbol-topbar .brand-text{
  justify-self:start;color:var(--ink)!important;font:700 31px/1 'Space Grotesk';letter-spacing:-.07em;
}
.unified-topbar nav,.topbar nav,.symbol-topbar nav{
  justify-self:center!important;display:flex!important;align-items:center!important;gap:clamp(18px,3vw,46px)!important;
  font-size:11px!important;font-weight:700!important;letter-spacing:.09em!important;
}
.unified-topbar nav a,.topbar nav a,.symbol-topbar nav a{color:var(--ink)!important;position:relative}
.unified-topbar nav a:after,.topbar nav a:after,.symbol-topbar nav a:after{
  content:"";position:absolute;left:0;right:auto;bottom:-5px;width:0;height:1px;background:var(--ink)!important;transition:width .22s ease;
}
.unified-topbar nav a:hover:after,.topbar nav a:hover:after,.symbol-topbar nav a:hover:after{width:100%}
.unified-topbar .nav-cta,.topbar .nav-cta,.symbol-topbar .nav-cta{
  justify-self:end!important;color:var(--ink)!important;border:1px solid rgba(17,17,17,.45)!important;background:transparent!important;
  padding:9px 13px!important;font-size:10px!important;letter-spacing:.08em!important;
}
.unified-topbar .nav-cta:hover,.topbar .nav-cta:hover,.symbol-topbar .nav-cta:hover{
  background:var(--ink)!important;color:var(--paper)!important;
}
.page-main{padding-top:80px!important}
.symbol-main{padding-top:0!important}

/* loader stays, now on the same paper tone */
.intro-loader{
  background:var(--paper)!important;color:var(--ink)!important;
}
.intro-meta{color:rgba(17,17,17,.5)!important}
.intro-symbol:nth-child(1){color:var(--ink)!important}

/* remove dark surface language globally */
.services,.service-page,.contact,.contact-page,.studio-strip,.clean-cta,
.editorial-services,.editorial-cta,.footer-dark,.dark-site,.home-main,
.editorial-home,.editorial-home .symbol-main{
  background:var(--paper)!important;color:var(--ink)!important;
}
.services,.service-page,.studio-strip,.clean-cta,.editorial-services,.editorial-cta,.contact,.contact-page{
  border-color:var(--soft-line)!important;
}
.light-head,.service-row,.service-detail,.studio-strip-list,.studio-strip-list a,
.editorial-services-links,.editorial-services-links a,.contact-bottom,.contact-card,.contact-cards{
  border-color:var(--soft-line)!important;
}
.service-row p,.service-detail p,.studio-strip>span,.editorial-services-label{color:rgba(17,17,17,.58)!important}
.service-tags span{border-color:rgba(17,17,17,.28)!important}
.contact-card{background:var(--paper)!important;color:var(--ink)!important}
.contact-cards{background:var(--soft-line)!important}
.contact h2,.contact h2 a,.contact-bottom,.contact-bottom a,.contact-bottom p{color:var(--ink)!important}
.contact h2 a:hover,.contact-card a:hover,.service-row:hover,.studio-strip-list a:hover{color:var(--blue)!important}

/* image/card neutrals: no black panels */
.dark,.project-live-preview,.clean-project-media.dark,.project-media.dark{
  background:#dedbd4!important;
}
.preview-label{background:rgba(244,240,233,.9)!important;color:var(--ink)!important;border:1px solid var(--soft-line)!important}

/* all footers live on paper */
footer,.footer-dark,.clean-footer{
  background:var(--paper)!important;color:var(--ink)!important;border-top:1px solid var(--soft-line)!important;
}

/* preserve the light landing, but remove small tonal jumps between sections */
.light-home .project-index,.light-home .editorial-services,.light-home .editorial-cta{
  background:var(--paper)!important;color:var(--ink)!important;
}

/* buttons that used to become black now remain graphic but lighter */
.pill,.big-pill,.filter-btn{border-color:var(--ink)!important;color:var(--ink)!important;background:transparent!important}
.pill:hover,.big-pill:hover,.filter-btn:hover,.filter-btn.active{
  background:#ddd8cf!important;color:var(--ink)!important;
}

@media(max-width:900px){
  .topbar,.topbar-dark,.symbol-topbar,.unified-topbar{grid-template-columns:1fr auto!important;padding:0 20px!important}
  .unified-topbar nav,.topbar nav,.symbol-topbar nav{display:none!important}
  .unified-topbar .nav-cta,.topbar .nav-cta,.symbol-topbar .nav-cta{display:block!important}
}

/* V9 — typography + alignment cleanup */
:root{
  --display-size:clamp(64px,8.2vw,132px);
  --display-leading:1.06;
  --display-tracking:-.052em;
  --symbol-stroke:1.6;
}

/* one title system throughout the site */
.light-hero-copy h1,
.page-hero h1,
.work-hero-v3 h1,
.project-detail-hero h1{
  font-family:'Space Grotesk',sans-serif!important;
  font-size:var(--display-size)!important;
  line-height:var(--display-leading)!important;
  letter-spacing:var(--display-tracking)!important;
  font-weight:600!important;
  text-align:left!important;
}

/* consistent vertical breathing room for Croatian diacritics (Č / Ć / Š / Ž) */
.light-hero-copy h1 span{
  display:block;
  white-space:nowrap;
  font-size:1em!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  padding:.055em 0 .09em!important;
}
.light-hero-copy h1 span:nth-child(2){font-size:1em!important;letter-spacing:inherit!important}

/* landing: move the whole statement to the left, keep the secondary information quiet */
.light-hero-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr)!important;
  column-gap:7vw!important;
}
.light-hero-copy{
  grid-column:1!important;
  grid-row:2!important;
  justify-self:start!important;
  width:100%!important;
  max-width:980px!important;
  text-align:left!important;
  padding:7vh 0 4vh!important;
}
.light-hero-copy .hero-overline{text-align:left!important}
.light-hero-aside{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:end!important;
  align-self:center!important;
  text-align:right!important;
  align-items:flex-end!important;
}
.light-hero-bottom{
  margin:48px 0 0!important;
  max-width:760px!important;
  justify-content:start!important;
  text-align:left!important;
}

/* unify heading spacing on all secondary pages too */
.page-hero h1,
.work-hero-v3 h1,
.project-detail-hero h1{
  padding-top:.03em;
  padding-bottom:.08em;
}
.page-hero h1 br,
.work-hero-v3 h1 br{line-height:inherit}

/* loader + persistent symbols: identical optical stroke for all four marks */
.intro-symbols{gap:clamp(18px,2.2vw,38px)!important;font:inherit!important}
.intro-symbol{
  width:clamp(54px,6vw,88px);
  height:clamp(54px,6vw,88px);
  display:grid!important;
  place-items:center;
}
.intro-symbol svg,
.ui-symbol svg{
  width:100%;height:100%;display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:var(--symbol-stroke);
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
}
.intro-symbol:nth-child(1){color:var(--ink)!important}
.intro-symbol:nth-child(2){color:#315fcb!important}
.intro-symbol:nth-child(3){color:#65d34e!important}
.intro-symbol:nth-child(4){color:#f14a28!important}
.ui-symbol{width:28px;height:28px;font:inherit!important}
.ui-line{color:var(--ink)!important}

@media(max-width:900px){
  :root{--display-size:clamp(54px,12.8vw,104px);--display-leading:1.07}
  .light-hero-grid{grid-template-columns:1fr!important}
  .light-hero-copy{grid-column:1!important;max-width:none!important;padding:9vh 0 5vh!important}
  .light-hero-aside{display:none!important}
  .light-hero-bottom{grid-template-columns:1fr!important;max-width:560px!important}
}
@media(max-width:560px){
  :root{--display-size:clamp(46px,14vw,76px);--display-leading:1.08;--display-tracking:-.045em}
  .light-hero-copy h1 span{white-space:normal!important;padding:.04em 0 .075em!important}
  .intro-symbol{width:52px;height:52px}
  .ui-symbol{width:24px;height:24px}
}

/* === V10: PRNT identity only — preserve existing V9 layout === */
/* Use the real RGB PRNT logo everywhere the text brand previously appeared. */
.unified-topbar .brand-text,
.topbar .brand-text,
.symbol-topbar .brand-text,
.brand-text{
  display:block!important;
  width:132px!important;
  height:48px!important;
  flex:0 0 132px;
  font-size:0!important;
  line-height:0!important;
  letter-spacing:0!important;
  color:transparent!important;
  background-image:url('assets/prnt-logo-rgb.png')!important;
  background-repeat:no-repeat!important;
  background-position:left center!important;
  background-size:contain!important;
}

/* Cursor keeps the existing ring/movement, but the centre is only the PRNT symbol. */
.cursor-dot{
  width:18px!important;
  height:18px!important;
  background-color:transparent!important;
  background-image:url('assets/prnt-symbol.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  border-radius:0!important;
  mix-blend-mode:normal!important;
}
.light-home .cursor-dot,
.dark-site .cursor-dot{
  background-color:transparent!important;
  background-image:url('assets/prnt-symbol.png')!important;
  mix-blend-mode:normal!important;
}
.cursor-ring{
  border-color:rgba(10,10,10,.38)!important;
}

@media(max-width:900px){
  .unified-topbar .brand-text,
  .topbar .brand-text,
  .symbol-topbar .brand-text,
  .brand-text{
    width:108px!important;
    height:40px!important;
    flex-basis:108px;
  }
}


/* === V12: align Work + purposeful blue ticker + RGB accents === */
.work-v3-page{background:var(--paper)!important;color:var(--ink)!important}
.work-v3-page .page-main{padding-top:88px!important}

/* Work starts at exactly the same vertical rhythm as Services / Studio / Contact. */
.work-hero-v3{
  padding:86px 4vw 70px!important;
  display:grid!important;
  grid-template-columns:1fr 420px!important;
  column-gap:70px!important;
  align-items:end!important;
  min-height:0!important;
  border-bottom:0!important;
}
.work-hero-v3 .eyebrow{
  grid-column:1/-1!important;
  color:var(--green)!important;
  margin:0 0 22px!important;
}
.work-hero-v3 h1{color:var(--ink)!important}
.work-hero-v3 h1 em{color:var(--blue)!important;font-style:normal!important}
.work-hero-v3 p{
  color:var(--ink)!important;
  font-size:17px!important;
  line-height:1.6!important;
  margin:0 0 18px!important;
}

/* Replace the decorative blue bar with a slow typographic conveyor. */
.keyword-ticker{
  width:100%;
  height:46px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--blue);
  color:var(--paper);
  border-top:1px solid rgba(17,17,17,.12);
  border-bottom:1px solid rgba(17,17,17,.12);
}
.keyword-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  padding-left:28px;
  animation:prntTicker 34s linear infinite;
  will-change:transform;
}
.keyword-track span{
  font:600 11px/1 'DM Sans',sans-serif;
  letter-spacing:.13em;
}
.keyword-track i{
  font-style:normal;
  color:var(--green);
  font-size:16px;
  line-height:1;
}
.keyword-track i:nth-of-type(3n){color:var(--orange)}
@keyframes prntTicker{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.keyword-track{animation:none}}

/* Work area is light like the rest of the site. */
.work-all-v3{background:var(--paper)!important;color:var(--ink)!important;padding:80px 4vw 120px!important}
.work-v3-page .filter-btn{color:var(--ink)!important;border-color:rgba(17,17,17,.28)!important}
.work-v3-page .filter-btn.active,
.work-v3-page .filter-btn:hover{background:var(--blue)!important;color:var(--paper)!important;border-color:var(--blue)!important}
.work-v3-page .wall-img{background:#e9e5de!important}
.work-v3-page .wall-card span,
.work-v3-page .wall-card h2{color:var(--ink)!important}

/* Small blue/green accents tie the RGB logo into the UI without recolouring whole sections. */
.unified-topbar nav a:nth-child(1):after{background:var(--blue)!important}
.unified-topbar nav a:nth-child(2):after{background:var(--green)!important}
.unified-topbar nav a:nth-child(3):after{background:var(--blue)!important}
.unified-topbar nav a:nth-child(4):after{background:var(--green)!important}
.nav-cta{border-color:var(--blue)!important}
.nav-cta:hover{background:var(--blue)!important;color:var(--paper)!important}
.page-hero .eyebrow{color:var(--green)}
.page-hero h1 em{color:var(--blue)!important}
.service-tags span:nth-child(odd){border-color:rgba(49,95,203,.55)!important}
.service-tags span:nth-child(even){border-color:rgba(101,211,78,.65)!important}
.principle strong{color:var(--blue)}
.contact-card>span{color:var(--green)}

@media(max-width:900px){
  .work-hero-v3{grid-template-columns:1fr!important;gap:26px!important;padding:70px 4vw 55px!important}
  .work-hero-v3 p{max-width:560px!important}
  .keyword-ticker{height:42px}
}


/* === V13: landing green moving strip === */
.home-green-ticker{
  width:100%;
  height:48px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--green);
  color:var(--ink);
  border-top:1px solid rgba(17,17,17,.14);
  border-bottom:1px solid rgba(17,17,17,.14);
  position:relative;
  z-index:5;
}
.home-green-track{
  width:max-content;
  display:flex;
  align-items:center;
  gap:30px;
  white-space:nowrap;
  padding-left:30px;
  animation:homeGreenTicker 38s linear infinite;
  will-change:transform;
}
.home-green-track span{
  font:600 11px/1 'DM Sans',sans-serif;
  letter-spacing:.13em;
}
.home-green-track i{
  font-style:normal;
  font:500 17px/1 'Space Grotesk',sans-serif;
}
.home-green-track i:nth-of-type(3n+1){color:var(--blue)}
.home-green-track i:nth-of-type(3n+2){color:var(--paper)}
.home-green-track i:nth-of-type(3n){color:var(--orange)}
@keyframes homeGreenTicker{to{transform:translateX(-50%)}}
.home-green-ticker:hover .home-green-track{animation-duration:22s}
@media(prefers-reduced-motion:reduce){.home-green-track{animation:none}}
@media(max-width:700px){
  .home-green-ticker{height:43px}
  .home-green-track{gap:22px;padding-left:22px;animation-duration:32s}
  .home-green-track span{font-size:10px}
}

/* === V14: alternate project view on landing hover === */
.project-live-preview img{
  transition:opacity .22s ease, transform .65s cubic-bezier(.16,1,.3,1)!important;
}
.project-index-row:hover + *{}
.project-index-row.is-active h3{color:var(--blue)}


/* === V15: grid alignment + tighter display leading + seamless home ticker === */

/* Header brand aligns to the same 4vw content grid as page copy. */
.unified-topbar,
.service-page .topbar,
.contact-page .topbar,
.light-home .symbol-topbar,
.topbar{
  padding-left:4vw!important;
  padding-right:4vw!important;
}
.unified-topbar .brand-text,
.topbar .brand-text,
.symbol-topbar .brand-text,
.brand-text{
  justify-self:start!important;
  margin-left:0!important;
  background-position:left center!important;
}

/* Slightly tighter title rhythm everywhere, while keeping diacritics safe. */
:root{
  --display-leading:0.96;
}
.light-hero-copy h1,
.page-hero h1,
.work-hero-v3 h1,
.project-detail-hero h1{
  line-height:var(--display-leading)!important;
}
.light-hero-copy h1 span{
  padding:.035em 0 .055em!important;
}
.page-hero h1,
.work-hero-v3 h1,
.project-detail-hero h1{
  padding-top:.015em!important;
  padding-bottom:.045em!important;
}

/* Seamless marquee: two identical groups, each exactly one loop-length. */
.home-green-ticker{
  overflow:hidden!important;
}
.home-green-track{
  display:flex!important;
  gap:0!important;
  padding-left:0!important;
  width:max-content!important;
  animation:homeGreenTickerLoop 32s linear infinite!important;
}
.home-green-group{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:30px;
  padding-right:30px;
  white-space:nowrap;
}
@keyframes homeGreenTickerLoop{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.home-green-ticker:hover .home-green-track{
  animation-duration:22s!important;
}
@media(prefers-reduced-motion:reduce){
  .home-green-track{animation:none!important}
}
@media(max-width:900px){
  :root{--display-leading:0.99}
  .home-green-group{gap:22px;padding-right:22px}
}
@media(max-width:560px){
  :root{--display-leading:1.01}
}


/* === V16: truly seamless landing ticker + Studio image hierarchy === */

/* Four identical groups; move exactly one group per cycle (25% of track). */
.home-green-track{
  display:flex!important;
  width:max-content!important;
  min-width:max-content!important;
  gap:0!important;
  padding:0!important;
  transform:translate3d(0,0,0);
  animation:homeGreenTickerInfinite 36s linear infinite!important;
  will-change:transform;
}
.home-green-group{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:30px!important;
  padding-right:30px!important;
  white-space:nowrap!important;
}
@keyframes homeGreenTickerInfinite{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-25%,0,0)}
}
.home-green-ticker:hover .home-green-track{
  animation-duration:24s!important;
}
@media(prefers-reduced-motion:reduce){
  .home-green-track{animation:none!important}
}

/* Studio photos: the magnifier/detail image is now the dominant image. */
.studio-photo-grid{
  grid-template-columns:.8fr 1.4fr!important;
  align-items:start!important;
}
.studio-photo-grid img:first-child{
  height:520px!important;
  margin-top:150px!important;
}
.studio-photo-grid img:last-child{
  height:720px!important;
  margin-top:0!important;
}

@media(max-width:900px){
  .home-green-group{gap:22px!important;padding-right:22px!important}
  .studio-photo-grid{
    grid-template-columns:1fr!important;
  }
  .studio-photo-grid img:first-child,
  .studio-photo-grid img:last-child{
    height:auto!important;
    margin-top:0!important;
  }
}


/* === V17: interactive project brief === */
html{scroll-padding-top:96px}
.brief-section{
  padding:clamp(80px,10vw,150px) 4vw;
  border-bottom:1px solid var(--soft-line);
  background:var(--paper);
}
.brief-shell{
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.65fr);
  gap:clamp(55px,8vw,150px);
  align-items:start;
}
.brief-intro{position:sticky;top:120px}
.brief-intro h2{
  margin:25px 0 30px;
  font:600 clamp(54px,6.6vw,110px)/.92 'Space Grotesk',sans-serif;
  letter-spacing:-.06em;
}
.brief-intro p{max-width:410px;font-size:16px;line-height:1.65}
.project-brief-form{min-width:0}
.brief-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

.brief-progress{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);
  margin-bottom:65px;
}
.brief-progress-step{
  appearance:none;background:none;border:0;border-right:1px solid var(--soft-line);
  padding:13px 12px 16px 0;text-align:left;color:rgba(17,17,17,.4);
  cursor:pointer;font-family:'DM Sans',sans-serif;
}
.brief-progress-step:last-child{border-right:0}
.brief-progress-step span,.brief-progress-step b{display:block}
.brief-progress-step span{font-size:10px;letter-spacing:.12em;margin-bottom:6px}
.brief-progress-step b{font-size:11px;letter-spacing:.08em}
.brief-progress-step.is-active{color:var(--blue)}
.brief-progress-step.is-done{color:var(--green)}

.brief-stage[hidden]{display:none!important}
.brief-stage.is-active{animation:briefIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes briefIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.brief-step-head{margin-bottom:35px}
.brief-step-head>span{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--green)}
.brief-step-head h3{
  margin:12px 0 8px;font:600 clamp(38px,5vw,72px)/.95 'Space Grotesk',sans-serif;
  letter-spacing:-.055em;
}
.brief-step-head p{margin:0;color:rgba(17,17,17,.62)}

.brief-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.brief-choice{
  position:relative;min-height:145px;padding:22px;border:1px solid rgba(17,17,17,.25);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;
  gap:12px 18px;cursor:pointer;transition:.22s ease;background:transparent;
}
.brief-choice input{position:absolute;opacity:0;pointer-events:none}
.brief-choice .choice-no{font-size:10px;letter-spacing:.12em;color:rgba(17,17,17,.55)}
.brief-choice strong{
  grid-column:1/-1;align-self:end;font:600 clamp(22px,2.5vw,36px)/1 'Space Grotesk';
  letter-spacing:-.04em;
}
.brief-choice small{grid-column:1/-1;font-size:11px;letter-spacing:.04em;color:rgba(17,17,17,.6)}
.brief-choice:hover{border-color:var(--blue);transform:translateY(-2px)}
.brief-choice:has(input:checked){background:var(--blue);color:var(--paper);border-color:var(--blue)}
.brief-choice:has(input:checked) small,.brief-choice:has(input:checked) .choice-no{color:var(--paper)}

.brief-services .brief-choice{min-height:120px}
.brief-services .brief-choice:has(input:checked){background:var(--green);color:var(--ink);border-color:var(--green)}
.brief-services .brief-choice:has(input:checked) small,.brief-services .brief-choice:has(input:checked) .choice-no{color:var(--ink)}

.brief-extra-wrap{margin-top:28px}
.brief-extra-wrap label,.brief-field>span,.brief-field legend,.brief-option-field legend{
  display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px;
}
.brief-extra-wrap input,.brief-field input,.brief-field textarea{
  width:100%;border:0;border-bottom:1px solid rgba(17,17,17,.35);background:transparent;
  padding:13px 0;font:500 16px/1.45 'DM Sans';border-radius:0;outline:none;color:var(--ink);
}
.brief-field textarea{resize:vertical;min-height:150px}
.brief-extra-wrap input:focus,.brief-field input:focus,.brief-field textarea:focus{border-color:var(--blue)}

.brief-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 28px}
.brief-field{display:block}
.brief-field-wide,.brief-option-field{grid-column:1/-1}
.brief-option-field{border:0;padding:0;margin:0}
.brief-option-field legend small{font-weight:500;text-transform:none;letter-spacing:0;color:rgba(17,17,17,.48)}
.brief-option-row{display:flex;flex-wrap:wrap;gap:8px}
.brief-option-row label{cursor:pointer}
.brief-option-row input{position:absolute;opacity:0}
.brief-option-row span{
  display:block;padding:10px 14px;border:1px solid rgba(17,17,17,.28);border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:.06em;transition:.2s;
}
.brief-option-row label:hover span{border-color:var(--blue)}
.brief-option-row input:checked+span{background:var(--blue);color:var(--paper);border-color:var(--blue)}

.brief-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 28px}
.brief-summary{margin-top:60px;border:1px solid var(--ink)}
.brief-summary-head{
  display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--ink);
  font-size:10px;font-weight:700;letter-spacing:.11em;
}
.brief-summary-grid{display:grid;grid-template-columns:repeat(2,1fr)}
.brief-summary-grid>div{padding:20px 15px;min-height:120px;border-right:1px solid var(--soft-line);border-bottom:1px solid var(--soft-line)}
.brief-summary-grid>div:nth-child(even){border-right:0}
.brief-summary-grid>div:nth-last-child(-n+2){border-bottom:0}
.brief-summary-grid span{display:block;font-size:9px;letter-spacing:.12em;color:var(--blue);margin-bottom:12px}
.brief-summary-grid strong{display:block;font:500 16px/1.35 'DM Sans'}

.brief-consent{display:flex;gap:12px;align-items:flex-start;margin:28px 0 0;font-size:12px;line-height:1.5;cursor:pointer}
.brief-consent input{margin-top:3px;accent-color:var(--green)}

.brief-actions{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:18px;border-top:1px solid var(--soft-line)}
.brief-actions-end{justify-content:flex-end}
.brief-next,.brief-back,.brief-submit{
  appearance:none;border:0;background:none;padding:12px 0;font:700 11px 'DM Sans';
  letter-spacing:.09em;cursor:pointer;color:var(--ink);
}
.brief-next,.brief-submit{font-size:13px}
.brief-next span,.brief-submit span{color:var(--blue);font-size:18px;margin-left:8px}
.brief-submit{padding:14px 18px;border:1px solid var(--blue);background:var(--blue);color:var(--paper)}
.brief-submit span{color:var(--green)}
.brief-back{color:rgba(17,17,17,.58)}
.brief-next:hover,.brief-back:hover{color:var(--blue)}
.brief-submit:hover{background:var(--green);border-color:var(--green);color:var(--ink)}
.brief-form-note{font-size:10px;line-height:1.5;color:rgba(17,17,17,.48);max-width:620px;margin:18px 0 0}

.brief-error{
  margin-top:12px;color:var(--orange);font-size:12px;font-weight:600;
}

@media(max-width:900px){
  .brief-shell{grid-template-columns:1fr;gap:55px}
  .brief-intro{position:static}
  .brief-intro h2{max-width:700px}
  .brief-progress{margin-bottom:45px}
}
@media(max-width:620px){
  .brief-section{padding-left:20px;padding-right:20px}
  .brief-choice-grid,.brief-fields,.brief-contact-grid{grid-template-columns:1fr}
  .brief-field-wide,.brief-option-field{grid-column:auto}
  .brief-progress-step b{display:none}
  .brief-progress-step{padding-right:5px}
  .brief-summary-grid{grid-template-columns:1fr}
  .brief-summary-grid>div{border-right:0!important;border-bottom:1px solid var(--soft-line)!important}
  .brief-summary-grid>div:last-child{border-bottom:0!important}
}


/* === V18: progressive, as-you-go project brief === */
.progressive-brief .brief-shell{
  grid-template-columns:minmax(260px,.58fr) minmax(0,1.72fr)!important;
  gap:clamp(70px,9vw,170px)!important;
}
.progressive-brief .brief-intro{
  position:sticky;
  top:116px;
  max-width:360px;
}
.progressive-brief .brief-intro h2{
  font-size:clamp(42px,5.2vw,78px)!important;
  line-height:.96!important;
  letter-spacing:-.055em!important;
  margin:20px 0 24px!important;
}
.progressive-brief .brief-intro p{
  max-width:330px;
  font-size:14px;
  line-height:1.65;
}
.brief-mini-legend{
  margin-top:42px;
  padding-top:14px;
  border-top:1px solid var(--soft-line);
  display:grid;
  gap:9px;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(17,17,17,.55);
}
.brief-mini-legend span{display:flex;gap:10px}
.brief-mini-legend b{color:var(--blue);min-width:22px}

.progressive-form{min-width:0}
.flow-block{
  border-top:1px solid rgba(17,17,17,.22);
  padding:28px 0 34px;
  opacity:.35;
  max-height:110px;
  overflow:hidden;
  transition:max-height .8s cubic-bezier(.16,1,.3,1),opacity .45s ease,padding .45s ease;
}
.flow-block.is-open{
  opacity:1;
  max-height:2400px;
  padding-bottom:70px;
}
.flow-block[aria-hidden="true"]{pointer-events:none}
.flow-block.is-open[aria-hidden="false"],
.flow-block.is-open:not([aria-hidden]){pointer-events:auto}

.flow-head{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:18px;
  align-items:start;
  margin-bottom:28px;
}
.flow-head>span{
  width:32px;height:32px;border:1px solid var(--blue);border-radius:50%;
  display:grid;place-items:center;
  color:var(--blue);
  font-size:10px;font-weight:700;
}
.flow-head small{
  display:block;font-size:9px;letter-spacing:.13em;color:var(--green);font-weight:700;margin-bottom:7px;
}
.flow-head h3{
  margin:0;
  font:600 clamp(28px,3.4vw,52px)/1 'Space Grotesk',sans-serif;
  letter-spacing:-.05em;
}
.flow-head p{margin:8px 0 0;font-size:13px;color:rgba(17,17,17,.55)}

.progressive-brief .brief-choice-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding-left:60px;
}
.progressive-brief .brief-choice{
  min-height:118px;
  padding:18px;
}
.progressive-brief .brief-choice strong{font-size:clamp(19px,2vw,30px)}
.progressive-brief .brief-services .brief-choice{min-height:96px}

.progressive-brief .brief-extra-wrap,
.progressive-brief .brief-fields,
.progressive-brief .brief-contact-grid,
.progressive-brief .brief-summary,
.progressive-brief .brief-consent,
.progressive-brief .brief-submit-row,
.progressive-brief .brief-form-note{
  margin-left:60px;
}

.brief-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid var(--soft-line);
}
.brief-submit-row p{
  max-width:460px;
  margin:0;
  font-size:12px;
  line-height:1.5;
  color:rgba(17,17,17,.56);
}

.progressive-brief .brief-progress,
.progressive-brief .brief-actions,
.progressive-brief .brief-step-head{display:none!important}

@media(max-width:900px){
  .progressive-brief .brief-shell{grid-template-columns:1fr!important;gap:55px!important}
  .progressive-brief .brief-intro{position:static;max-width:620px}
  .progressive-brief .brief-intro p{max-width:520px}
}
@media(max-width:620px){
  .progressive-brief .brief-choice-grid{grid-template-columns:1fr;padding-left:0}
  .progressive-brief .brief-extra-wrap,
  .progressive-brief .brief-fields,
  .progressive-brief .brief-contact-grid,
  .progressive-brief .brief-summary,
  .progressive-brief .brief-consent,
  .progressive-brief .brief-submit-row,
  .progressive-brief .brief-form-note{margin-left:0}
  .flow-head{grid-template-columns:36px 1fr;gap:12px}
  .brief-submit-row{align-items:flex-start;flex-direction:column}
}

/* ==========================================================
   V10 / PIXEL → PRINT HERO
   Clean digital type above, real CSS halftone below.
   No image asset: the raster is generated by repeating dots
   and clipped directly inside the letterforms.
   ========================================================== */
.light-hero-copy .pixel-print-title{
  margin:0;
  font:600 clamp(68px,10.8vw,174px)/.84 'Space Grotesk',sans-serif;
  letter-spacing:-.074em;
  text-transform:uppercase;
  text-align:right;
}
.light-hero-copy .pixel-print-title span{
  display:block;
  white-space:nowrap;
  padding:.025em 0 .08em;
}
.light-hero-copy .pixel-print-title .pixel-line{
  color:var(--ink);
}

/* V13 — solid ink core + halftone only around the letter edges.
   The real text stays filled blue. A slightly enlarged duplicate sits
   behind it and is made from CSS dots, so the raster peeks out at edges. */
.light-hero-copy .pixel-print-title .print-halftone{
  position:relative;
  width:max-content;
  margin-left:auto;
  color:var(--blue);
  -webkit-text-fill-color:var(--blue);
  background:none;
  filter:none;
  isolation:isolate;
}
.light-hero-copy .pixel-print-title .print-halftone::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-image:radial-gradient(circle at center, var(--blue) 0 45%, transparent 49% 100%);
  background-size:5px 5px;
  background-position:0 0;
  -webkit-background-clip:text;
  background-clip:text;
  transform:scale(1.018,1.055);
  transform-origin:center;
  opacity:.98;
  pointer-events:none;
}

@media(max-width:900px){
  .light-hero-copy .pixel-print-title{font-size:13.7vw;line-height:.87}
  .light-hero-copy .pixel-print-title .print-halftone::after{background-size:4.4px 4.4px;transform:scale(1.02,1.06)}
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title{font-size:15vw;line-height:.9;letter-spacing:-.065em}
  .light-hero-copy .pixel-print-title .print-halftone::after{background-size:3.8px 3.8px;transform:scale(1.022,1.065)}
}

/* ==========================================================
   V14 — supplied DO OTISKA raster artwork
   Uses the user's exact pixel/raster lettering as an image asset.
   ========================================================== */
.light-hero-copy .pixel-print-title .print-artwork{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:.015em 0 0!important;
  padding:0!important;
  line-height:0!important;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:left center;
}
/* disable the older generated halftone layer if cached classes survive */
.light-hero-copy .pixel-print-title .print-artwork::before,
.light-hero-copy .pixel-print-title .print-artwork::after{content:none!important;display:none!important}

@media(max-width:900px){
  .light-hero-copy .pixel-print-title .print-artwork{margin-top:.035em!important}
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title .print-artwork{margin-top:.05em!important}
}

/* V15 — align supplied DO OTISKA artwork with OD PIKSELA */
.light-hero-copy .pixel-print-title .print-artwork{
  width:72.5%!important;
  margin:.015em 0 0 0!important;
  transform-origin:left center;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  width:100%!important;
  max-width:none!important;
}
@media(max-width:900px){
  .light-hero-copy .pixel-print-title .print-artwork{width:72.5%!important}
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title .print-artwork{width:72.5%!important}
}


/* === V17: ticker fixes === */
/* Landing: hover must not alter the marquee in any way. */
.home-green-ticker:hover .home-green-track{
  animation-duration:36s!important;
}

/* Work page: four equal copies, moving exactly one copy each loop. */
.keyword-track{
  display:flex!important;
  align-items:center!important;
  width:max-content!important;
  min-width:max-content!important;
  gap:0!important;
  padding:0!important;
  white-space:nowrap!important;
  animation:prntTickerInfinite 34s linear infinite!important;
  will-change:transform;
}
.keyword-group{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  gap:28px!important;
  padding-right:28px!important;
  white-space:nowrap!important;
}
@keyframes prntTickerInfinite{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-25%,0,0)}
}
@media(max-width:700px){
  .keyword-group{gap:22px!important;padding-right:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .keyword-track{animation:none!important}
}


/* project media gallery: local assets */
.project-media-gallery{margin:0 4vw 110px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.project-media-item{margin:0;min-height:420px;background:#f2f2f0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.project-media-item:nth-child(3n){grid-column:1/-1;min-height:560px}
.project-media-item img{display:block;width:100%;height:100%;max-height:82vh;object-fit:contain}
@media(max-width:760px){.project-media-gallery{grid-template-columns:1fr;gap:14px;margin-bottom:70px}.project-media-item,.project-media-item:nth-child(3n){grid-column:auto;min-height:300px}}


/* V13 — optical tracking cleanup */
.giant-cta a{letter-spacing:-.035em!important;line-height:.88!important;}
.project-detail-hero h1,.work-hero-v3 h1,.page-hero h1{letter-spacing:-.035em!important;}
.wall-card h2{letter-spacing:-.035em!important;}
@media(max-width:560px){.giant-cta a{letter-spacing:-.025em!important;}}


/* === V18 — mobile refinement / optical typography === */
/* DO OTISKA keeps its full vertical scale and is condensed only horizontally,
   so its optical width aligns with OD PIKSELA without looking simply smaller. */
.light-hero-copy .pixel-print-title .print-artwork{
  width:100%!important;
  overflow:visible!important;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  width:100%!important;
  height:auto!important;
  transform:scaleX(.725);
  transform-origin:left center;
}

/* Give Croatian diacritics enough air between display lines. */
.giant-cta a{
  letter-spacing:-.018em!important;
  line-height:.98!important;
  overflow:visible!important;
}
.project-detail-hero h1,
.work-hero-v3 h1,
.page-hero h1,
.editorial-cta h2{
  letter-spacing:-.026em!important;
  line-height:1.0!important;
  overflow:visible!important;
}
.wall-card h2{letter-spacing:-.025em!important;line-height:1.02!important}

/* Vector arrows: no platform emoji rendering. */
.vector-arrow{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;vertical-align:-.12em;flex:0 0 auto}
.vector-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.smart-link .vector-arrow,.project-index-row .vector-arrow{width:1.15em;height:1.15em}

.mobile-menu-toggle,.mobile-nav-dropdown{display:none}

@media(max-width:900px){
  .topbar,.topbar-dark,.symbol-topbar,.unified-topbar{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    height:76px!important;
    padding:0 18px!important;
  }
  .unified-topbar .brand-text,.topbar .brand-text,.symbol-topbar .brand-text,.brand-text{
    width:96px!important;height:38px!important;flex:0 0 96px!important;
  }
  .unified-topbar .nav-cta,.topbar .nav-cta,.symbol-topbar .nav-cta{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:8px!important;
    padding:8px 10px!important;
    z-index:2;
  }
  .mobile-menu-toggle{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-left:auto;
    padding:8px 0 8px 10px;
    border:0;
    background:transparent;
    color:var(--ink);
    font:700 9px/1 'DM Sans',sans-serif;
    letter-spacing:.09em;
    cursor:pointer;
    z-index:3;
  }
  .mobile-menu-toggle::after{
    content:'';
    width:8px;height:8px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .22s ease;
  }
  .mobile-menu-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-1px)}
  .mobile-nav-dropdown{
    display:grid;
    position:fixed;
    z-index:99;
    top:76px;
    left:50%;
    width:min(88vw,420px);
    transform:translate(-50%,-12px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(243,240,233,.97);
    backdrop-filter:blur(18px);
    border:1px solid rgba(10,10,10,.18);
    transition:opacity .2s ease,transform .28s cubic-bezier(.16,1,.3,1),visibility .2s;
  }
  .mobile-nav-dropdown.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
  .mobile-nav-dropdown a{
    display:flex;justify-content:space-between;align-items:center;
    padding:17px 18px;
    border-bottom:1px solid rgba(10,10,10,.14);
    font:600 13px/1 'Space Grotesk',sans-serif;
    letter-spacing:.02em;
  }
  .mobile-nav-dropdown a:last-child{border-bottom:0}

  /* Keep the mobile menu anchored on the right on Services and Contact. */
  body.service-page .mobile-menu-toggle,
  body.contact-page .mobile-menu-toggle{
    position:relative!important;
    right:auto!important;
    left:auto!important;
    transform:none!important;
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
  body.service-page .mobile-nav-dropdown,
  body.contact-page .mobile-nav-dropdown{
    left:auto;
    right:18px;
    width:min(82vw,360px);
    transform:translateY(-12px);
  }
  body.service-page .mobile-nav-dropdown.is-open,
  body.contact-page .mobile-nav-dropdown.is-open{transform:translateY(0)}
}

/* Mobile selected-work carousel: one lightweight image at a time. */
.mobile-project-meta{display:none}
@media(max-width:700px){
  .project-index{padding-top:76px!important;padding-bottom:88px!important}
  .project-index-head{margin-bottom:28px!important;gap:12px!important}
  .project-index-head>span{order:1}
  .project-index-head h2{order:2}
  .project-index-head>a{order:3;justify-self:start;margin-top:4px}
  .project-index-layout{display:block!important}
  .project-index-list{display:none!important}
  .project-live-preview{
    display:block!important;
    position:relative!important;
    top:auto!important;
    width:100%!important;
    height:min(112vw,560px)!important;
    margin:0!important;
    overflow:hidden!important;
    background:#ece9e2!important;
    touch-action:pan-y;
  }
  .project-live-preview img{
    width:100%!important;height:100%!important;
    object-fit:contain!important;
    padding:7vw!important;
    transition:opacity .28s ease,transform .55s cubic-bezier(.16,1,.3,1)!important;
  }
  .project-live-preview.is-touching img{transform:scale(.985)!important}
  .project-live-preview .preview-label{display:none!important}
  .mobile-project-meta{
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px 18px;
    padding:14px 0 0;
    border-top:1px solid #111;
    margin-top:12px;
  }
  .mobile-project-meta h3{
    grid-column:1/-1;
    margin:0 0 2px;
    font:600 clamp(28px,8.3vw,42px)/.96 'Space Grotesk',sans-serif;
    letter-spacing:-.035em;
  }
  .mobile-project-meta span{
    font-size:9px;
    letter-spacing:.1em;
    color:#666;
  }
  .mobile-project-meta .mobile-project-year{text-align:right;color:#111}
  .mobile-project-swipehint{
    grid-column:1/-1;
    display:flex!important;
    align-items:center;
    gap:8px;
    margin-top:8px;
    color:#777!important;
    font-size:8px!important;
  }
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title .print-artwork img{transform:scaleX(.725)}
  .giant-cta a{letter-spacing:-.012em!important;line-height:1.01!important}
}

/* === V19 — final landing optical alignment + softer mobile project transitions === */
/* Keep the supplied DO OTISKA artwork readable: only a mild horizontal condense.
   JS sets its layout width from the measured OD PIKSELA line so both right edges align optically. */
.light-hero-copy .pixel-print-title{
  --print-condense:.84;
}
.light-hero-copy .pixel-print-title .print-artwork{
  width:auto!important;
  max-width:none!important;
  transform:none!important;
  overflow:visible!important;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  width:100%!important;
  max-width:none!important;
  transform:scaleX(var(--print-condense))!important;
  transform-origin:left center!important;
}

@media(max-width:700px){
  /* Dark stage prevents the bright flash between mostly dark project mockups. */
  .project-live-preview{
    background:#111!important;
  }
  .project-live-preview img{
    position:absolute!important;
    inset:0!important;
    padding:7vw!important;
    transition:opacity .62s ease,transform .78s cubic-bezier(.22,.61,.36,1)!important;
    backface-visibility:hidden;
  }
  .project-live-preview .mobile-preview-ghost{
    z-index:1!important;
    opacity:1;
    pointer-events:none;
  }
  .project-live-preview>img:not(.mobile-preview-ghost){z-index:2!important}
  .project-live-preview.is-touching>img:not(.mobile-preview-ghost){transform:scale(.992)!important}
}


/* === V20 — exact OD PIKSELA / DO OTISKA alignment ===
   Both lines are right-aligned. DO OTISKA keeps a much gentler horizontal
   compression, while JS matches its visible width to the actual text width
   of OD PIKSELA on desktop and mobile. */
.light-hero-copy .pixel-print-title{
  --print-condense:.92;
}
.light-hero-copy .pixel-print-title .pixel-line{
  width:max-content!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:0!important;
}
.light-hero-copy .pixel-print-title .print-artwork{
  margin:.015em 0 0 auto!important;
  transform:none!important;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  transform:scaleX(var(--print-condense))!important;
  transform-origin:right center!important;
}
@media(max-width:900px){
  .light-hero-copy .pixel-print-title{--print-condense:.92}
  .light-hero-copy .pixel-print-title .print-artwork{margin:.035em 0 0 auto!important}
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title{--print-condense:.92}
  .light-hero-copy .pixel-print-title .print-artwork{margin:.05em 0 0 auto!important}
}


/* === V21 — coherent landing title alignment ===
   OD PIKSELA and DO OTISKA share one left edge and one visual width.
   The raster keeps its original proportions — no horizontal squeezing. */
.light-hero-copy .pixel-print-title{
  text-align:left!important;
  width:max-content!important;
  max-width:100%!important;
}
.light-hero-copy .pixel-print-title .pixel-line{
  width:max-content!important;
  max-width:100%!important;
  margin:0!important;
}
.light-hero-copy .pixel-print-title .print-artwork{
  display:block!important;
  margin:.015em 0 0 0!important;
  max-width:none!important;
  overflow:visible!important;
  transform:none!important;
}
.light-hero-copy .pixel-print-title .print-artwork img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  transform:none!important;
  transform-origin:left center!important;
  object-position:left center!important;
}
@media(max-width:900px){
  .light-hero-copy .pixel-print-title .print-artwork{margin-top:.035em!important}
}
@media(max-width:560px){
  .light-hero-copy .pixel-print-title .print-artwork{margin-top:.05em!important}
}

/* FINAL MOBILE NAV POSITION — keep IZBORNIK on the right on every page. */
@media(max-width:900px){
  .topbar .mobile-menu-toggle,
  .topbar-dark .mobile-menu-toggle,
  .symbol-topbar .mobile-menu-toggle,
  .unified-topbar .mobile-menu-toggle{
    position:absolute!important;
    top:50%!important;
    right:18px!important;
    left:auto!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    flex:0 0 auto!important;
    z-index:4!important;
  }

  .mobile-nav-dropdown{
    left:auto!important;
    right:18px!important;
    width:min(82vw,360px)!important;
    transform:translateY(-12px)!important;
  }

  .mobile-nav-dropdown.is-open{
    transform:translateY(0)!important;
  }
}

/* FINAL MOBILE HEADER GRID — PRNT left / CTA center / IZBORNIK right on every page. */
@media(max-width:900px){
  .topbar,
  .topbar-dark,
  .symbol-topbar,
  .unified-topbar,
  body.service-page .topbar,
  body.contact-page .topbar{
    display:grid!important;
    grid-template-columns:96px 1fr 96px!important;
    grid-template-rows:76px!important;
    align-items:center!important;
    height:76px!important;
    padding:0 18px!important;
    gap:0!important;
  }

  .topbar .brand-text,
  .topbar-dark .brand-text,
  .symbol-topbar .brand-text,
  .unified-topbar .brand-text{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
  }

  .topbar nav:not(.mobile-nav-dropdown),
  .topbar-dark nav:not(.mobile-nav-dropdown),
  .symbol-topbar nav:not(.mobile-nav-dropdown),
  .unified-topbar nav:not(.mobile-nav-dropdown){
    display:none!important;
  }

  .topbar .nav-cta,
  .topbar-dark .nav-cta,
  .symbol-topbar .nav-cta,
  .unified-topbar .nav-cta{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    right:auto!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    z-index:2!important;
  }

  .topbar .mobile-menu-toggle,
  .topbar-dark .mobile-menu-toggle,
  .symbol-topbar .mobile-menu-toggle,
  .unified-topbar .mobile-menu-toggle,
  body.service-page .mobile-menu-toggle,
  body.contact-page .mobile-menu-toggle{
    position:relative!important;
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;
    transform:none!important;
    margin:0!important;
    z-index:4!important;
  }
}