/* JMKFLOW Portfolio: editorial / interaction pass */
:root{
  --bg:#fff8f5;--paper:#fffdfb;--paper-2:#fff4ef;--ink:#282421;--muted:#70635e;
  --accent:#c96743;--accent-dark:#b6492e;--accent-soft:#f5e0d7;--line:rgba(201,103,67,.18);
  --shadow:0 30px 90px rgba(89,52,39,.12);--shadow-card:0 18px 48px rgba(92,55,40,.12);
  --serif:Georgia,"Times New Roman",serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --content-max:1304px;--nav-max:1160px;--footer-max:1260px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:hidden}
body{margin:0;min-width:0;overflow-x:hidden;background:linear-gradient(180deg,#fffaf7 0%,#fff8f5 48%,#fffaf8 100%);color:var(--ink);font-family:var(--sans);line-height:1.65}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0}img{display:block;max-width:100%}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:14px;z-index:200;transform:translateY(-150%);padding:10px 14px;border-radius:999px;background:#282421;color:white}.skip-link:focus{transform:none}
.container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:72px;min-width:0}

/* HEADER: ten sam rytm i pozycja co JMKFLOW / MB Beauty */
.site-header{position:sticky;top:0;z-index:80;background:linear-gradient(180deg,rgba(255,249,246,.94),rgba(255,249,246,.72));backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,103,67,.06);transition:.22s ease}
.site-header.is-scrolled{background:rgba(255,249,246,.88);box-shadow:0 8px 35px rgba(120,73,54,.08);backdrop-filter:blur(20px)}
.nav{width:min(calc(100% - 48px),var(--nav-max));min-height:92px;margin-inline:auto;display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:28px;position:relative;min-width:0}
.brand{position:relative;isolation:isolate;width:fit-content;display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;line-height:1;padding:8px 14px 14px;z-index:102}
.brand::before{content:"";position:absolute;left:-44px;top:-42px;width:190px;height:150px;border-radius:50%;background:radial-gradient(ellipse at 45% 42%,rgba(239,194,177,.6),rgba(255,243,237,.34) 46%,transparent 72%);z-index:-1}
.brand::after{content:"";position:absolute;left:-10px;top:-12px;width:120px;height:120px;border:1px solid rgba(201,103,67,.2);border-right-color:transparent;border-bottom-color:transparent;border-radius:50%;z-index:-1}
.brand__mark{display:block;color:var(--accent);font:400 3.1rem/1.18 var(--serif);padding-bottom:10px}.brand__sub{margin-top:8px;color:#5a5350;font-size:.55rem;font-weight:800;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nav__links{justify-self:center;display:flex;align-items:center;gap:clamp(10px,1.55vw,26px);color:#302d2b;font-size:.93rem;white-space:nowrap}.nav__links>a{position:relative;padding:8px 0;transition:color .18s ease}.nav__links>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:99px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}.nav__links>a:hover,.nav__links>a:focus-visible,.nav__links>a.is-active{color:var(--accent)}.nav__links>a:hover::after,.nav__links>a:focus-visible::after,.nav__links>a.is-active::after{transform:scaleX(1)}
.nav__cta,.nav__mobile-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:linear-gradient(135deg,var(--accent),#d87955);color:white;font-size:.94rem;font-weight:800;box-shadow:0 15px 34px rgba(188,91,57,.22);white-space:nowrap}.nav__cta svg,.nav__mobile-contact svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav__cta:hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent));transform:translateY(-1px)}
.nav-toggle{display:none;z-index:103;width:48px;height:48px;border-radius:50%;background:var(--accent-soft);padding:13px;place-items:center;gap:4px;cursor:pointer}.nav-toggle span:not(.sr-only){display:block;width:19px;height:2px;border-radius:99px;background:var(--accent);transition:transform .2s ease,opacity .2s ease}.nav__mobile-footer{display:none}

/* HERO: taki sam spokojny measure jak poprawione MB Beauty */
.portfolio-hero{position:relative;max-width:var(--content-max);margin-inline:auto;padding:148px 0 104px;overflow:visible}
.portfolio-hero::before{content:"";position:absolute;left:-12vw;top:-18vw;width:48vw;height:48vw;border-radius:50%;background:radial-gradient(circle,rgba(238,188,168,.28),rgba(255,248,245,0) 70%);pointer-events:none}
.portfolio-hero::after{content:"";position:absolute;right:-12vw;bottom:-24vw;width:50vw;height:50vw;border:1px solid rgba(201,103,67,.10);border-radius:50%;pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr);gap:68px;align-items:center;min-width:0}
.hero-copy{min-width:0;max-width:610px}.eyebrow{margin:0 0 24px;color:var(--accent);font-size:.76rem;font-weight:900;letter-spacing:.3em;text-transform:uppercase}.hero-copy h1{max-width:650px;margin:0;font:400 clamp(4rem,6.2vw,7rem)/.96 var(--serif);letter-spacing:-.045em}.hero-copy h1 em{font-style:italic;color:var(--accent);font-weight:400}.hero-lead{max-width:560px;margin:32px 0 0;color:var(--muted);font-size:clamp(1rem,1.08vw,1.12rem);line-height:1.82}.hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:470px;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-meta div{padding:17px 0}.hero-meta div+div{padding-left:26px;border-left:1px solid var(--line)}.hero-meta strong{display:block;font:400 2rem/1 var(--serif);color:var(--accent)}.hero-meta span{display:block;margin-top:7px;color:#72645e;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

.hero-collage{position:relative;min-height:610px;min-width:0;isolation:isolate;perspective:1200px}
.hero-collage::before{content:"";position:absolute;left:10%;top:10%;width:75%;height:74%;border-radius:50%;background:radial-gradient(circle at 45% 45%,rgba(247,222,212,.82),rgba(255,250,247,0) 70%);filter:blur(5px);z-index:-2}
.hero-collage::after{content:"";position:absolute;right:1%;top:2%;width:118px;height:118px;background-image:radial-gradient(rgba(201,103,67,.34) 1.1px,transparent 1.1px);background-size:12px 12px;opacity:.52;z-index:-1}
.hero-tile{position:absolute;display:block;overflow:hidden;border:1px solid rgba(196,137,111,.22);border-radius:26px;background:#fffdfb;box-shadow:var(--shadow-card);transform:translate3d(var(--mx,0),var(--my,0),0) rotate(var(--r,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,filter .32s ease;will-change:transform;outline:none}
.hero-tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}.hero-tile:hover,.hero-tile:focus-visible{z-index:20;box-shadow:0 30px 82px rgba(86,49,37,.22);transform:translate3d(var(--mx,0),var(--my,0),0) rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.055)}.hero-tile:hover img,.hero-tile:focus-visible img{transform:scale(1.045)}
.hero-collage:has(.hero-tile:hover) .hero-tile:not(:hover){filter:saturate(.78) brightness(.97)}
.hero-tile--mb{left:2%;top:13%;width:50%;height:66%;--r:-2.5deg}.hero-tile--kross{right:2%;top:3%;width:38%;height:43%;--r:3.5deg}.hero-tile--omamo{right:8%;bottom:3%;width:31%;height:37%;--r:-2deg}.hero-tile--paws{left:0;bottom:0;width:27%;height:31%;--r:4deg}.hero-tile--travel{left:35%;bottom:-1%;width:28%;height:33%;--r:2deg}
.hero-tile--mb img{object-position:48% 50%}.hero-tile--travel img{display:block;width:calc(100% + 2px);height:calc(100% + 4px);max-width:none;margin:-1px 0 -3px -1px;object-position:center}.hero-tile--omamo>img{display:block;width:calc(100% + 2px);height:calc(100% + 12px);max-width:none;margin:-1px 0 -11px -1px;transform:scale(1.3);transform-origin:center bottom}.hero-tile--omamo:hover>img,.hero-tile--omamo:focus-visible>img{transform:scale(1.32)}.hero-tile__project-title{position:absolute;z-index:2;left:20px;top:18px;max-width:calc(100% - 40px);color:#fff;font:400 .8rem/.9 var(--serif);letter-spacing:-.03em;text-shadow:0 1px 7px rgba(50,35,27,.22);pointer-events:none}.hero-tile__label{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.55);border-radius:14px;background:rgba(255,250,247,.80);backdrop-filter:blur(12px);transform:translateY(8px);opacity:0;transition:.25s ease}.hero-tile:hover .hero-tile__label,.hero-tile:focus-visible .hero-tile__label{transform:none;opacity:1}.hero-tile__label b{font:400 .95rem var(--serif)}.hero-tile__label small{color:var(--accent-dark);font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hero-tile--paws .hero-tile__label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:5px;padding-inline:9px}.hero-tile--paws .hero-tile__label b{min-width:0;font-size:.9rem}.hero-tile--paws .hero-tile__label small{min-width:0;font-size:clamp(.48rem,.52vw,.58rem);letter-spacing:.035em;white-space:nowrap}
.hero-kross-mini{position:absolute;inset:0;background:linear-gradient(155deg,#eef4f6 0%,#d8e5eb 100%);overflow:hidden}.hero-kross-mini::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(29,57,70,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(29,57,70,.08) 1px,transparent 1px);background-size:24px 24px}.hero-kross-mini>span{position:absolute;left:14px;top:12px;z-index:2;font:900 1rem/1 var(--sans);letter-spacing:.09em;color:#1e2f38}.hero-kross-mini>small{position:absolute;right:12px;bottom:10px;z-index:2;font-size:.5rem;font-weight:900;letter-spacing:.12em;color:#586a73}.hero-kross-mini img{position:absolute;left:3%;right:3%;top:17%;width:94%;height:70%;object-fit:contain;mix-blend-mode:multiply}
.collage-hint{position:absolute;right:-2px;bottom:13%;z-index:25;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:999px;background:#302a27;color:#fff;font-size:.62rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 28px rgba(54,36,29,.15)}.collage-hint i{font-style:normal;color:#efa387}

/* INDEX */
.project-index-wrap{padding:0 0 112px}.project-index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.project-index a{min-width:0;padding:22px 22px 24px;position:relative}.project-index a+a{border-left:1px solid var(--line)}.project-index a::before{content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:.22s ease}.project-index a:hover::before,.project-index a:focus-visible::before,.project-index a.is-current::before{transform:scaleX(1)}.project-index small{display:block;color:var(--accent);font-weight:900;letter-spacing:.16em}.project-index b{display:block;margin-top:8px;font:400 1.08rem/1.1 var(--serif)}.project-index span{display:block;margin-top:6px;color:var(--muted);font-size:.74rem}

/* WORK */
.work{padding-bottom:140px}.work-intro{max-width:1040px;margin-bottom:70px}.section-kicker{margin:0 0 22px;color:var(--accent);font-size:.75rem;font-weight:900;letter-spacing:.26em;text-transform:uppercase}.section-title{max-width:780px;margin:0;font:400 clamp(3rem,4.6vw,5.3rem)/1.02 var(--serif);letter-spacing:-.035em}.section-title em{color:var(--accent);font-weight:400}.section-intro{max-width:620px;margin:24px 0 0;color:var(--muted);font-size:1rem;line-height:1.85}
.featured-project{margin:0 0 76px;border-radius:36px;overflow:hidden;border:1px solid rgba(201,103,67,.14);box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}.featured-project:hover{transform:translateY(-4px);box-shadow:0 34px 100px rgba(89,52,39,.16)}.featured-project:focus-within{outline:3px solid rgba(201,103,67,.28);outline-offset:5px}

/* MB BEAUTY: full bleed, zero "pustego" pola */
.featured-project--mb{background:#f1ddd4}.featured-project--mb>a{display:block}.mb-fullbleed{position:relative;min-height:610px;overflow:hidden;background:#f1ddd4}.mb-fullbleed>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}.featured-project--mb:hover .mb-fullbleed>img{transform:scale(1.025)}.mb-fullbleed::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(37,29,25,.20) 0%,rgba(37,29,25,0) 48%,rgba(37,29,25,.03) 100%);pointer-events:none}.mb-overlay-card{position:absolute;z-index:2;left:34px;bottom:34px;width:min(430px,calc(100% - 68px));padding:26px 28px 28px;border:1px solid rgba(255,255,255,.65);border-radius:24px;background:rgba(255,250,247,.86);backdrop-filter:blur(16px);box-shadow:0 18px 48px rgba(70,45,36,.14)}
.feature-number{display:block;color:var(--accent-dark);font-size:.68rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.mb-overlay-card h3,.feature-copy h3{margin:11px 0 12px;font:400 clamp(3.5rem,5vw,5.4rem)/.9 var(--serif);letter-spacing:-.04em}.mb-overlay-card p,.feature-copy p{margin:0;color:#66564f;line-height:1.75}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.chip{padding:7px 10px;border:1px solid rgba(201,103,67,.22);border-radius:999px;background:rgba(255,255,255,.44);font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.project-cta{display:inline-flex;align-items:center;gap:12px;margin-top:26px;color:var(--accent-dark);font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.project-cta i{font:400 1.15rem/1 var(--serif);transition:transform .2s ease}.featured-project:hover .project-cta i{transform:translate(3px,-3px)}

/* KROSS: interactive UI mockup instead of a generic photo */
.featured-project--kross{background:linear-gradient(135deg,#202b31 0%,#2e424b 100%);color:white}.kross-project-layout{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);min-height:650px;align-items:stretch}.kross-copy{display:flex;flex-direction:column;justify-content:center;padding:56px 48px}.kross-copy .feature-number{color:#93c8df}.kross-copy p{color:#c7d1d5;max-width:440px}.kross-copy .chip{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#e9f0f2}.kross-copy .project-cta{color:#a8d6e9}
.kross-ui-wrap{position:relative;display:grid;place-items:center;padding:40px 42px 48px;overflow:hidden;background:radial-gradient(circle at 55% 45%,rgba(117,175,199,.22),transparent 58%)}.kross-ui-wrap::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px}.kross-ui-link{position:absolute;inset:0;z-index:1}.kross-browser{pointer-events:none}.kross-controls{pointer-events:auto}.kross-browser{position:relative;z-index:2;width:min(100%,760px);border:1px solid rgba(255,255,255,.18);border-radius:24px;background:#f6f7f5;box-shadow:0 35px 90px rgba(0,0,0,.32);overflow:hidden;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--mx,0),var(--my,0),0);transition:transform .25s ease}.kross-browser__bar{height:42px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:0 15px;background:#eef0ef;border-bottom:1px solid #d9dddc;color:#526169;font-size:.65rem}.browser-dots{display:flex;gap:5px}.browser-dots i{width:7px;height:7px;border-radius:50%;background:#c1c7c7}.browser-url{justify-self:center;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-live{font-weight:900;letter-spacing:.1em;color:#1f7b5d}.kross-screen{min-height:500px;background:#f7f7f4;color:#1c252a}.kross-screen__nav{height:58px;display:flex;align-items:center;gap:20px;padding:0 24px;border-bottom:1px solid #e4e7e5;font-size:.62rem;font-weight:800;letter-spacing:.08em}.kross-screen__nav strong{font-size:1.18rem;letter-spacing:.05em;margin-right:auto}.kross-screen__nav button{padding:5px 8px;border-radius:999px;background:#e7ecec;font-size:.58rem}.kross-product{position:relative;min-height:442px;padding:38px 28px 26px;display:grid;grid-template-columns:.62fr 1.38fr;align-items:center;overflow:hidden}.kross-product::before{content:"";position:absolute;right:-18%;top:-28%;width:70%;height:110%;border-radius:50%;border:1px solid #d7e0e2}.kross-product__copy{position:relative;z-index:4}.product-label{color:#477d91;font-size:.62rem;font-weight:900;letter-spacing:.16em}.kross-product__copy h4{margin:10px 0 12px;font:900 clamp(2.8rem,4.5vw,5rem)/.84 var(--sans);letter-spacing:-.08em}.kross-product__copy h4 em{font-style:normal;color:#2356a7}.kross-product__copy p{max-width:230px;margin:0;color:#66737a;font-size:.75rem;line-height:1.55}.spec-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:22px}.spec-row span{padding:9px 8px;border:1px solid #dfe5e4;border-radius:10px;background:#fff;color:#768086;font-size:.52rem;text-align:center}.spec-row b{display:block;color:#273338;font-size:.72rem}.kross-bike-stage{position:relative;z-index:2;min-height:330px;display:grid;place-items:center}.kross-bike-stage img{position:relative;z-index:3;width:100%;height:300px;object-fit:contain;mix-blend-mode:multiply;transition:opacity .2s ease,transform .4s cubic-bezier(.2,.8,.2,1)}.kross-browser:hover .kross-bike-stage img{transform:translateY(-4px) scale(1.018)}.bike-orbit{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,#e2ecf0 0%,#f6f7f5 68%);border:1px solid #dbe4e6}.bike-caption{position:absolute;right:4px;bottom:8px;z-index:4;padding:6px 9px;border-radius:999px;background:#202c32;color:#fff;font-size:.52rem;font-weight:900;letter-spacing:.1em}.kross-controls{position:absolute;z-index:8;right:24px;bottom:18px;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 10px 26px rgba(50,64,69,.10)}.kross-controls>span{margin-right:2px;color:#7a858a;font-size:.5rem;font-weight:900;letter-spacing:.12em}.color-dot{width:20px;height:20px;border-radius:50%;background:var(--dot);border:3px solid #fff;box-shadow:0 0 0 1px rgba(25,35,40,.14);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.color-dot:hover,.color-dot:focus-visible{transform:scale(1.13)}.color-dot.is-active{box-shadow:0 0 0 2px #222}.kross-ui-note{position:absolute;z-index:6;right:28px;bottom:18px;display:none}.kross-ui-note span,.kross-ui-note b{display:block}

/* Remaining three: full-bleed editorial tiles */
.more-heading{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;max-width:1040px;margin:108px 0 42px}.more-heading h3{margin:0;font:400 clamp(2.4rem,3.6vw,4rem)/1.06 var(--serif)}.more-heading p{max-width:440px;margin:0;color:var(--muted);line-height:1.8}.small-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.small-project{min-width:0;border-radius:28px;overflow:hidden;box-shadow:0 14px 44px rgba(82,52,41,.10);transition:transform .3s ease,box-shadow .3s ease}.small-project:hover{transform:translateY(-5px);box-shadow:0 24px 62px rgba(82,52,41,.16)}.small-project>a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}.small-project img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.small-project:hover img{transform:scale(1.045)}.small-project::after{content:"";position:absolute;inset:0;pointer-events:none}.small-overlay{position:absolute;z-index:3;left:16px;right:16px;bottom:16px;padding:20px;border:1px solid rgba(255,255,255,.48);border-radius:20px;background:rgba(255,252,249,.86);backdrop-filter:blur(13px);box-shadow:0 14px 36px rgba(48,33,27,.10)}.small-overlay>span{color:var(--accent-dark);font-size:.62rem;font-weight:900;letter-spacing:.13em}.small-overlay h4{margin:8px 0 7px;font:400 clamp(2.25rem,3vw,3.3rem)/.95 var(--serif)}.small-overlay p{margin:0;color:#665a55;font-size:.84rem;line-height:1.55}.small-overlay b{display:block;margin-top:15px;color:var(--accent-dark);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase}

/* Principle + CTA */
.portfolio-principle{padding:0 0 120px}.principle-card{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;padding:58px;border-radius:34px;background:linear-gradient(135deg,#f4ded5,#fff6f1);border:1px solid rgba(201,103,67,.16)}.principle-card h2{max-width:700px;margin:0;font:400 clamp(2.8rem,4.4vw,5.1rem)/1.02 var(--serif)}.principle-card h2 em{color:var(--accent);font-weight:400}.principle-card p{max-width:500px;margin:0;color:#6e5d56;font-size:1rem;line-height:1.85}.cta{padding:0 0 100px}.cta-card{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;padding:58px;border-radius:34px;background:linear-gradient(135deg,#312b28 0%,#4a3932 100%);color:white;overflow:hidden;position:relative}.cta-card::after{content:"";position:absolute;right:-100px;top:-130px;width:360px;height:360px;border:1px solid rgba(240,169,143,.26);border-radius:50%}.cta-card h2{position:relative;z-index:1;max-width:780px;margin:0;font:400 clamp(2.8rem,4.5vw,5.1rem)/1 var(--serif)}.cta-card p{position:relative;z-index:1;max-width:610px;color:#e7dcd6}.cta-button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--accent);color:white;font-weight:850;white-space:nowrap}

/* FOOTER: 1:1 pozycja i logotyp jak MB Beauty / O mnie */
.site-footer{padding:36px 0;border-top:1px solid var(--line);background:transparent}.footer-grid{width:min(calc(100% - 48px),var(--footer-max));margin:auto;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:end}.footer-brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1;width:fit-content}.footer-brand strong{font:400 44px/.78 var(--serif);color:#ce6d46}.footer-brand span{margin-top:12px;color:#252220;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:none;white-space:nowrap}.footer-grid>p{margin:0;color:#81746e;font-size:11px;text-align:left;align-self:end}.footer-links{justify-self:end;display:flex;gap:18px;align-items:end;font-size:12px}.footer-links a:hover{color:var(--accent)}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}

@media (max-width:1180px) and (min-width:981px){.nav{width:min(calc(100% - 36px),var(--nav-max));grid-template-columns:150px 1fr auto;gap:18px}.nav__links{gap:clamp(8px,1.15vw,16px);font-size:.86rem}.nav__cta{padding:0 19px;font-size:.88rem}.container{padding-inline:48px}.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr);gap:42px}.kross-project-layout{grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr)}.kross-ui-wrap{padding:28px}.kross-product{grid-template-columns:.72fr 1.28fr}}

@media (max-width:980px), (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  .nav{width:min(calc(100% - 28px),var(--nav-max));min-height:82px;grid-template-columns:auto auto;justify-content:space-between;gap:18px;position:relative}.nav__cta{display:none}.nav-toggle{display:grid}.brand{z-index:102;padding:5px 10px 9px}
  .nav__links{counter-reset:mobile-nav;position:fixed;inset:0;z-index:95;display:grid;grid-template-columns:1fr;align-content:start;gap:2px;width:100vw;max-width:100vw;height:100dvh;padding:116px clamp(20px,7vw,68px) 28px;overflow-y:auto;overflow-x:hidden;background:linear-gradient(135deg,rgba(255,249,246,.99),rgba(249,226,217,.98));opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .nav__links.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.nav__links>a{counter-increment:mobile-nav;position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:58px;padding:10px 18px 10px 64px;border-radius:14px;font-family:var(--serif);font-size:clamp(1.65rem,7vw,2.05rem);line-height:1.05;color:#241f1c;white-space:normal!important}.nav__links>a::before{content:counter(mobile-nav,decimal-leading-zero);position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.72rem;font-weight:850;letter-spacing:.06em;color:#d07d61}.nav__links>a::after{left:17px;right:auto;top:17px;bottom:17px;width:3px;height:auto;transform:scaleY(0);transform-origin:center;background:#dc6744}.nav__links>a:hover::after,.nav__links>a:focus-visible::after,.nav__links>a.is-active::after{transform:scaleY(1)}.nav__links>a:hover,.nav__links>a:focus-visible,.nav__links>a.is-active{background:rgba(241,183,160,.22);color:#b8482e}
  .nav__mobile-footer{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin-top:24px;padding:24px 10px 0;border-top:1px solid rgba(201,103,67,.22);min-width:0}.nav__mobile-footer>span{grid-column:1/-1;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.nav__mobile-footer p{margin:0;max-width:300px;font:400 1rem/1.45 var(--serif)}.nav__mobile-contact{min-height:46px;padding:0 18px;font-size:.82rem;white-space:normal}.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){.nav__links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;padding:86px 22px 18px}.nav__links>a{font-size:clamp(1.4rem,4vw,1.9rem);min-height:46px;padding:7px 12px 7px 52px}.nav__links>a::before{left:14px}.nav__mobile-footer{grid-column:1/-1;grid-template-columns:1fr auto;margin-top:8px;padding-top:12px}.nav__mobile-footer>span{grid-column:auto}.nav__mobile-footer p{display:none}.nav__mobile-contact{min-height:42px}.brand__mark{font-size:2.7rem}.brand__sub{font-size:.49rem}}

@media (max-width:1197px){.container{padding-inline:34px}.portfolio-hero{padding-top:96px}.hero-grid{grid-template-columns:1fr;gap:40px}.hero-copy{max-width:650px}.hero-collage{width:min(100%,760px);min-height:590px;margin:0 auto}.kross-project-layout{grid-template-columns:1fr}.kross-copy{padding:42px 38px}.kross-ui-wrap{min-height:600px}.small-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.small-project:last-child{grid-column:1/-1;max-width:520px}.principle-card{grid-template-columns:1fr;gap:26px}}

@media (max-width:760px){
  .container{padding-inline:18px}.portfolio-hero{padding:72px 0 80px}.hero-copy h1{font-size:clamp(3.5rem,15vw,5.1rem)}.hero-lead{font-size:.98rem}.hero-meta{grid-template-columns:1fr}.hero-meta div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.hero-collage{min-height:490px;margin-top:18px}.collage-hint{display:none}.hero-tile{border-radius:18px}.hero-tile--mb{left:4%;top:8%;width:53%;height:62%}.hero-tile--kross{right:1%;top:1%;width:39%;height:40%}.hero-tile--omamo{right:5%;bottom:3%;width:34%;height:34%}.hero-tile--paws{left:0;bottom:0;width:27%;height:26%}.hero-tile--travel{left:35%;bottom:-1%;width:29%;height:30%}.hero-tile--kross .hero-tile__project-title,.hero-tile--omamo .hero-tile__project-title,.hero-tile--travel .hero-tile__project-title{left:10px;top:15px}.hero-tile--paws .hero-tile__project-title{left:5px;top:12px}.hero-tile__label{display:none}
  .project-index-wrap{padding-bottom:82px}.project-index{grid-template-columns:repeat(2,minmax(0,1fr))}.project-index a+a{border-left:0}.project-index a:nth-child(even){border-left:1px solid var(--line)}.project-index a:nth-child(n+3){border-top:1px solid var(--line)}.project-index a:last-child{grid-column:1/-1;border-left:0}.work{padding-bottom:100px}.work-intro{margin-bottom:44px}.section-title{font-size:clamp(2.9rem,12.5vw,4.2rem)}.section-intro{font-size:.95rem}
  .featured-project{border-radius:28px;margin-bottom:54px}.mb-fullbleed{min-height:520px}.mb-overlay-card{left:18px;right:18px;bottom:18px;width:auto;padding:22px}.mb-overlay-card h3{font-size:clamp(3.2rem,14vw,4.7rem)}
  .kross-copy{padding:34px 26px}.feature-copy h3{font-size:clamp(3.2rem,14vw,4.7rem)}.kross-ui-wrap{min-height:520px;padding:24px 16px 32px}.kross-browser{border-radius:18px}.kross-screen{min-height:450px}.kross-screen__nav{gap:10px;padding:0 14px}.kross-screen__nav span{display:none}.kross-product{grid-template-columns:1fr;padding:24px 18px 18px}.kross-product__copy{z-index:5}.kross-product__copy h4{font-size:3.2rem}.kross-product__copy p{display:none}.spec-row{max-width:260px}.kross-bike-stage{min-height:250px;margin-top:-12px}.kross-bike-stage img{height:220px}.bike-orbit{width:240px;height:240px}.kross-controls{right:14px;bottom:12px}.more-heading{display:block;margin:82px 0 32px}.more-heading p{margin-top:18px}.small-grid{grid-template-columns:1fr}.small-project:last-child{grid-column:auto;max-width:none}.principle-card{padding:34px 26px;border-radius:28px}.cta-card{grid-template-columns:1fr;padding:36px 26px;border-radius:28px}.cta-button{justify-self:start}
  .footer-grid{width:min(calc(100% - 28px),var(--footer-max));grid-template-columns:1fr;gap:30px;align-items:end}.footer-grid>p{text-align:left}.footer-links{justify-self:start;flex-wrap:wrap}
}

@media (max-width:430px){.nav__links{padding-left:16px;padding-right:16px}.nav__links>a{font-size:clamp(1.75rem,9vw,2.45rem)}.nav__mobile-footer{grid-template-columns:1fr}.nav__mobile-contact{justify-self:start}.hero-collage{min-height:430px}.project-index a{padding:18px 14px 20px}.mb-fullbleed{min-height:470px}.kross-ui-wrap{min-height:480px}.kross-browser__bar{grid-template-columns:auto 1fr}.browser-live{display:none}.kross-screen{min-height:410px}.kross-product__copy h4{font-size:2.8rem}.kross-bike-stage img{height:190px}.spec-row{grid-template-columns:repeat(3,1fr)}.kross-controls>span{display:none}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal,.hero-tile,.hero-tile img,.kross-browser,.kross-bike-stage img,.small-project img,.mb-fullbleed>img{transition:none!important}.reveal{opacity:1;transform:none!important}}


/* ==========================================================
   V3 / NEW MB + KROSS ART + HOME-MATCH MOBILE NAV + INTERACTION
   ========================================================== */

/* New artwork crops in the interactive hero */
.hero-tile--mb img{object-position:64% 50%}
.hero-tile--kross img{object-position:50% 50%}
.hero-tile--kross{background:#0d2334}
.hero-collage{--collage-x:0px;--collage-y:0px}
.hero-collage .hero-tile{translate:calc(var(--collage-x,0px) * var(--depth,0)) calc(var(--collage-y,0px) * var(--depth,0))}
.collage-cursor{position:absolute;z-index:40;left:0;top:0;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:rgba(40,36,33,.88);color:white;font-size:.55rem;font-weight:900;letter-spacing:.12em;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(10px);box-shadow:0 12px 35px rgba(44,29,24,.18)}
.hero-collage.is-pointer-active .collage-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Premium project posters: image itself is the UI presentation */
.project-poster{position:relative;display:block;overflow:hidden;isolation:isolate;min-height:610px;background:#efe0d8;perspective:1200px;--px:50%;--py:50%;--tx:0px;--ty:0px}
.project-poster>img{position:absolute;inset:-1.5%;width:103%;height:103%;max-width:none;object-fit:cover;object-position:center;transform:translate3d(var(--tx),var(--ty),0) scale(1.012);transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .35s ease;will-change:transform}
.project-poster:hover>img,.project-poster:focus-visible>img{filter:saturate(1.025) contrast(1.012)}
.poster-shine{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(circle 380px at var(--px) var(--py),rgba(255,255,255,.20),transparent 66%);mix-blend-mode:screen;opacity:.8}
.poster-shine--cool{background:radial-gradient(circle 420px at var(--px) var(--py),rgba(130,197,238,.13),transparent 68%)}
.poster-cursor{position:absolute;z-index:8;left:var(--px);top:var(--py);display:grid;place-items:center;min-width:112px;height:42px;padding:0 17px;border-radius:999px;background:rgba(255,250,247,.9);border:1px solid rgba(255,255,255,.6);box-shadow:0 14px 34px rgba(65,41,32,.14);backdrop-filter:blur(13px);color:#ad4b31;font-size:.61rem;font-weight:900;letter-spacing:.1em;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:opacity .16s ease,transform .16s ease}
.project-poster:hover .poster-cursor,.project-poster:focus-visible .poster-cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}
.poster-cursor--dark{background:rgba(13,34,49,.92);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:0 16px 38px rgba(3,16,27,.24)}
.poster-status{position:absolute;z-index:6;right:22px;top:22px;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:rgba(8,28,42,.84);color:#fff;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(13px);box-shadow:0 12px 30px rgba(5,20,31,.18)}
.poster-status b{font:400 1.3rem/1 var(--serif);color:#8fcef0}.poster-status span{font-size:.52rem;font-weight:850;line-height:1.35;letter-spacing:.1em}
.featured-project--kross{background:#0d2334}
.project-poster--kross{min-height:0;aspect-ratio:1672/941;background:#0b2031}
.project-poster--kross>img{object-fit:cover}
.featured-project--kross:hover{transform:translateY(-5px)}

/* MB artwork has intentional negative space; overlay sits in it, not over the hero content */
.mb-fullbleed.project-poster>img{object-position:50% 50%}
.mb-fullbleed.project-poster{min-height:610px}
.mb-overlay-card{left:3.1%;bottom:5.5%;width:min(410px,34%);padding:24px 26px 26px;background:rgba(255,250,247,.91)}
.mb-overlay-card h3{font-size:clamp(3.25rem,4.7vw,5rem)}

/* Interactive project rail */
.portfolio-rail{position:fixed;z-index:55;right:20px;top:50%;display:grid;gap:9px;transform:translateY(-50%);padding:11px 8px;border:1px solid rgba(201,103,67,.13);border-radius:999px;background:rgba(255,250,247,.72);backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(88,53,40,.08);opacity:0;pointer-events:none;transition:opacity .25s ease}
body.is-work-zone .portfolio-rail{opacity:1;pointer-events:auto}
.portfolio-rail__label{position:absolute;right:50%;bottom:calc(100% + 12px);transform:translateX(50%);font-size:.47rem;font-weight:900;letter-spacing:.14em;color:#9d7768;writing-mode:vertical-rl}
.portfolio-rail a{position:relative;width:28px;height:28px;display:grid;place-items:center;border-radius:50%}
.portfolio-rail a i{width:7px;height:7px;border-radius:50%;background:#d8b4a5;transition:.2s ease}.portfolio-rail a b{position:absolute;right:calc(100% + 8px);font-size:.55rem;color:var(--accent-dark);opacity:0;transform:translateX(5px);transition:.2s ease}
.portfolio-rail a:hover i,.portfolio-rail a.is-current i{background:var(--accent);transform:scale(1.5)}.portfolio-rail a:hover b,.portfolio-rail a.is-current b{opacity:1;transform:none}

/* Index microinteraction */
.project-index a{transition:background .22s ease,transform .22s ease}.project-index a:hover,.project-index a:focus-visible,.project-index a.is-current{background:rgba(247,225,216,.42)}.project-index a:hover{transform:translateY(-2px)}

/* Magnetic CTAs */
[data-magnetic]{will-change:transform;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}

/* Mobile navigation = homepage behaviour, not the previous full-screen menu. */
@media (max-width:840px), (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  body.menu-open{overflow:auto}
  .site-header{background:rgba(255,249,246,.9);backdrop-filter:blur(16px)}
  .nav{width:min(calc(100% - 32px),var(--nav-max))!important;min-height:76px!important;grid-template-columns:auto auto!important;justify-content:space-between!important;gap:28px!important;position:relative!important}
  .brand{padding:8px 14px 14px!important;z-index:102}.brand__mark{font-size:3.1rem!important;line-height:1.18!important;padding-bottom:10px!important}.brand__sub{font-size:.55rem!important;margin-top:8px!important}
  .nav__cta{display:none!important}.nav-toggle{display:grid!important;width:44px!important;height:44px!important;padding:12px!important}
  .nav__links{counter-reset:none!important;position:absolute!important;inset:auto 0 auto auto!important;left:auto!important;right:0!important;top:calc(100% + 8px)!important;z-index:105!important;width:min(360px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;height:auto!important;max-height:min(72vh,560px)!important;display:grid!important;grid-template-columns:1fr!important;align-content:start!important;gap:4px!important;margin:0!important;padding:12px!important;overflow-y:auto!important;overflow-x:hidden!important;border:1px solid var(--line)!important;border-radius:8px!important;background:rgba(255,253,251,.97)!important;box-shadow:var(--shadow-card)!important;backdrop-filter:blur(18px)!important;opacity:0!important;visibility:visible!important;pointer-events:none!important;transform:translateY(-12px)!important;transition:transform .18s ease,opacity .18s ease!important}
  .nav__links.is-open{opacity:1!important;pointer-events:auto!important;transform:translateY(0)!important}
  .nav__links>a{counter-increment:none!important;display:block!important;min-height:0!important;padding:12px 10px!important;border-radius:5px!important;font-family:var(--sans)!important;font-size:.95rem!important;line-height:1.3!important;color:#302d2b!important;white-space:nowrap!important;background:transparent!important}
  .nav__links>a::before{content:none!important}.nav__links>a::after{content:""!important;position:absolute!important;left:10px!important;right:auto!important;top:auto!important;bottom:5px!important;width:46px!important;height:2px!important;transform:scaleX(0)!important;transform-origin:left!important;background:var(--accent)!important}
  .nav__links>a:hover,.nav__links>a:focus-visible,.nav__links>a.is-active{color:var(--accent)!important;background:rgba(244,222,213,.36)!important}.nav__links>a:hover::after,.nav__links>a:focus-visible::after,.nav__links>a.is-active::after{transform:scaleX(1)!important}
  .nav__mobile-footer{display:none!important}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

@media (max-width:1100px){
  .portfolio-rail{display:none}
  .project-poster{min-height:0;aspect-ratio:1672/941}
  .mb-fullbleed.project-poster{min-height:0;aspect-ratio:1672/941}
  .mb-overlay-card{width:min(390px,44%);left:3%;bottom:5%;padding:20px 22px}.mb-overlay-card p{font-size:.88rem}.mb-overlay-card .chips{margin-top:14px}.mb-overlay-card .project-cta{margin-top:17px}
}

@media (max-width:760px){
  .hero-tile--mb img{object-position:69% 50%}.hero-tile--kross img{object-position:52% 50%}
  .poster-cursor,.collage-cursor{display:none}
  .mb-fullbleed.project-poster{aspect-ratio:auto;min-height:520px}.mb-fullbleed.project-poster>img{object-position:61% 50%}
  .mb-overlay-card{left:16px;right:16px;bottom:16px;width:auto;padding:21px 22px}.mb-overlay-card h3{font-size:clamp(3rem,13vw,4.4rem)}
  .project-poster--kross{aspect-ratio:1.02/1}.project-poster--kross>img{object-position:58% 50%;width:132%;height:103%;left:-16%}
  .poster-status{right:12px;top:12px}
}

@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  .nav{min-height:72px!important}.brand__mark{font-size:2.72rem!important}.brand__sub{font-size:.49rem!important}.nav__links{top:calc(100% + 5px)!important;max-height:calc(100vh - 86px)!important;width:min(330px,calc(100vw - 28px))!important}.nav__links>a{padding:9px 10px!important;font-size:.88rem!important}
}

@media (prefers-reduced-motion:reduce){.poster-cursor,.collage-cursor{display:none!important}.project-poster>img{transform:none!important}}

/* Mobile containment: decorative collage layers must never widen the document. */
@media (max-width:840px), (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  html,body{width:100%;max-width:100%;overflow-x:clip!important}
  body{position:relative}
  .site-header,main,.portfolio-hero,.site-footer{max-width:100%;overflow-x:clip}
  .portfolio-hero{overflow:hidden}
}

/* ==========================================================
   V4 / KROSS HTML COMPOSITION + HOMEPAGE FOOTER
   Only portfolio presentation/footer changes.
   ========================================================== */

/* KROSS hero miniature: a live HTML composition, never a cropped poster image. */
.hero-tile--kross{
  background:linear-gradient(145deg,#071a2b 0%,#0d2a43 100%);
  padding:12px;
}
.hero-kross-mini{
  position:absolute;
  inset:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(160deg,#0a2238,#0c3150);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.hero-kross-mini::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(126,180,218,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,180,218,.055) 1px,transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}
.hero-kross-mini__browser{
  position:absolute;
  inset:11% 7% 9%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
  border-radius:13px;
  background:#f8fafb;
  box-shadow:0 16px 34px rgba(0,0,0,.26);
}
.hero-kross-mini__bar{
  height:20px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 8px;
  background:#eaf0f2;
  border-bottom:1px solid #dce4e7;
}
.hero-kross-mini__bar i{width:4px;height:4px;border-radius:50%;background:#aebbc1}
.hero-kross-mini__bar span{margin-left:auto;color:#697981;font-size:4.6px;letter-spacing:.04em}
.hero-kross-mini__nav{
  height:26px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  border-bottom:1px solid #e7ecee;
  color:#25343b;
  font-size:4.8px;
  font-weight:850;
  letter-spacing:.08em;
}
.hero-kross-mini__nav b{margin-right:auto;font-size:8px;letter-spacing:.04em}
.hero-kross-mini__content{
  position:relative;
  height:calc(100% - 46px);
  display:grid;
  grid-template-columns:.44fr 1fr;
  align-items:center;
  gap:4px;
  padding:10px 8px 8px 11px;
  background:linear-gradient(135deg,#fbfcfc 0%,#eef5f7 100%);
}
.hero-kross-mini__content::after{
  content:"";
  position:absolute;
  right:5%;
  top:8%;
  width:64%;
  aspect-ratio:1;
  border:1px solid rgba(58,112,140,.13);
  border-radius:50%;
}
.hero-kross-mini__copy{position:relative;z-index:2;align-self:start;padding-top:10px}
.hero-kross-mini__copy small{display:block;color:#4d829b;font-size:4.6px;font-weight:900;letter-spacing:.12em}
.hero-kross-mini__copy strong{display:block;margin-top:5px;color:#17262d;font-size:14px;line-height:.83;letter-spacing:-.06em}
.hero-kross-mini__copy strong em{display:block;color:#2663b8;font-style:normal}
.hero-kross-mini__bike{position:relative;z-index:2;min-width:0;align-self:stretch;display:grid;place-items:center}
.hero-kross-mini__bike img{
  position:static!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:multiply;
  transform:none!important;
}
.hero-tile--kross:hover .hero-kross-mini__bike img,
.hero-tile--kross:focus-visible .hero-kross-mini__bike img{transform:translateY(-2px) scale(1.018)!important}

/* KROSS featured case: premium split layout built from real HTML/UI, so no part is cut. */
.featured-project--kross{
  overflow:hidden;
  background:linear-gradient(135deg,#071b2b 0%,#102f43 52%,#173e50 100%);
  box-shadow:0 28px 80px rgba(8,31,44,.16);
}
.kross-project-layout{min-height:690px;grid-template-columns:minmax(320px,.66fr) minmax(0,1.34fr)}
.kross-copy{
  position:relative;
  z-index:5;
  padding:64px 48px 60px;
  background:linear-gradient(145deg,rgba(6,25,40,.96),rgba(14,45,61,.88));
}
.kross-copy::after{
  content:"";
  position:absolute;
  right:-1px;
  top:9%;
  bottom:9%;
  width:1px;
  background:linear-gradient(transparent,rgba(130,197,226,.34),transparent);
}
.kross-copy .feature-number{color:#8ec8e1}
.kross-copy h3{color:#fff}
.kross-copy p{color:#cad6db;line-height:1.78}
.kross-copy .chip{border-color:rgba(164,211,231,.22);background:rgba(255,255,255,.055);color:#eef7fa}
.kross-copy .project-cta{color:#9bd4ec}
.kross-ui-wrap{
  min-width:0;
  padding:46px clamp(28px,3.2vw,52px) 50px;
  background:
    radial-gradient(circle at 57% 48%,rgba(101,165,194,.22),transparent 50%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
}
.kross-ui-wrap::before{display:none}
.kross-browser{
  width:min(100%,820px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:26px;
  background:#f7f9f8;
  box-shadow:0 34px 82px rgba(0,0,0,.31),0 0 0 1px rgba(255,255,255,.05) inset;
}
.kross-browser__bar{height:44px;background:#e9edef;color:#64747c}
.browser-live{color:#3c7d95}
.kross-screen{min-height:515px;background:linear-gradient(145deg,#fbfcfb 0%,#f0f5f6 100%)}
.kross-screen__nav{height:60px;padding-inline:26px;background:rgba(255,255,255,.82)}
.kross-product{min-height:455px;grid-template-columns:minmax(180px,.58fr) minmax(0,1.42fr);padding:38px 30px 28px}
.kross-product::before{right:-5%;top:-18%;width:65%;height:105%;border-color:rgba(68,118,142,.14)}
.kross-product__copy h4{font-size:clamp(3.2rem,4.6vw,5.15rem)}
.kross-bike-stage{min-width:0;min-height:350px;padding:4px 0 22px}
.kross-bike-stage img{
  width:100%;
  height:330px;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  mix-blend-mode:multiply;
}
.bike-orbit{width:min(330px,72%);height:auto;aspect-ratio:1;background:radial-gradient(circle,rgba(219,233,239,.85) 0%,rgba(247,249,248,.35) 70%);border-color:rgba(80,127,147,.15)}
.kross-controls{right:26px;bottom:20px}

/* Homepage footer, copied into Portfolio with its own isolated container rules. */
.site-footer{
  padding:0!important;
  border-top:0!important;
  background:rgba(255,249,246,.82)!important;
  color:#332e2b;
}
.site-footer .container{
  width:min(calc(100% - 48px),1160px);
  max-width:1160px;
  margin-inline:auto;
  padding-inline:0;
}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns:1.2fr .7fr .85fr 1fr 1.25fr;
  gap:42px;
  padding:54px 0 42px;
  align-items:start;
}
.site-footer .footer-brand{display:block;min-width:0}
.site-footer .brand--footer{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:0;
  line-height:1;
}
.site-footer .brand--footer::before,.site-footer .brand--footer::after{content:none!important;display:none!important}
.site-footer .brand--footer .brand__mark{font:400 4.6rem/1 var(--serif);color:var(--accent);padding:0}
.site-footer .brand--footer .brand__sub{margin-top:1px;color:#5a5350;font-size:.55rem;font-weight:800;line-height:1.1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.site-footer p,.site-footer a{display:block;margin:0 0 10px;color:#332e2b;font-size:.95rem;line-height:1.55}
.site-footer h2{margin:0 0 18px;font-family:var(--sans);font-size:.88rem;font-weight:900;line-height:1.55;text-transform:uppercase}
.site-footer .footer-brand>p{max-width:210px;margin-top:18px}
.site-footer .socials{display:flex;gap:11px;margin-top:20px}
.site-footer .socials a{width:30px;height:30px;margin:0;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:900;transition:transform .18s ease,background .18s ease}
.site-footer .socials a:hover{transform:translateY(-2px);background:#f1d3c6}
.site-footer .footer-hours{margin-top:18px;border-left:2px solid rgba(201,103,67,.38);padding-left:14px}
.site-footer .footer-hours span{display:block;margin-bottom:8px;color:var(--accent);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.site-footer .footer-hours p{margin-bottom:6px;color:#332e2b;font-size:.9rem;font-weight:800}
.site-footer .newsletter form{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:10px;align-items:center;margin-top:20px}
.site-footer .newsletter input[type="email"]{min-width:0;width:100%;height:46px;border:1px solid rgba(201,103,67,.45);border-radius:999px;background:transparent;color:var(--ink);padding:0 18px;outline:none}
.site-footer .newsletter input[type="email"]:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(201,103,67,.12)}
.site-footer .newsletter button.primary{width:46px;height:46px;display:grid;place-items:center;padding:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}
.site-footer .newsletter button svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.site-footer .newsletter__status{grid-column:1/-1;margin:0;font-size:.78rem}
.site-footer .footer-bottom{border-top:1px solid rgba(201,103,67,.12);background:rgba(245,226,218,.6)}
.site-footer .footer-bottom__inner{min-height:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:24px;color:#766d68;font-size:.82rem}
.site-footer .footer-bottom__inner>*{min-height:56px;display:grid;place-items:center;line-height:1;margin:0}
.site-footer .footer-bottom__inner>:nth-child(1){justify-content:flex-start}
.site-footer .footer-bottom__inner>:nth-child(2),.site-footer .footer-bottom__inner>:nth-child(3){justify-content:center}
.site-footer .footer-bottom__inner>:nth-child(4){justify-content:flex-end}
.site-footer .footer-legal-links{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0}
.site-footer .footer-bottom__inner a,.site-footer .footer-cookie-settings{position:relative;min-height:56px;height:56px;display:grid;place-items:center;margin:0;padding:0;border:0;background:transparent;color:#9b5138;font-family:var(--serif);font-size:.95rem;font-style:italic;line-height:1;cursor:pointer;white-space:nowrap}
.site-footer .footer-bottom__inner a::after,.site-footer .footer-cookie-settings::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:currentColor;opacity:.34;transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.site-footer .footer-bottom__inner a:hover::after,.site-footer .footer-bottom__inner a:focus-visible::after,.site-footer .footer-cookie-settings:hover::after,.site-footer .footer-cookie-settings:focus-visible::after{transform:scaleX(1)}

@media (max-width:1100px){
  .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kross-project-layout{grid-template-columns:1fr;min-height:0}
  .kross-copy{padding:44px 40px}
  .kross-copy::after{display:none}
  .kross-ui-wrap{min-height:590px;padding:34px}
}
@media (max-width:980px){
  .site-footer .footer-bottom__inner{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;padding:14px 0;text-align:center}
  .site-footer .footer-bottom__inner>*{min-height:34px;justify-content:center!important}
  .site-footer .footer-bottom__inner a,.site-footer .footer-cookie-settings{height:34px;min-height:34px}
  .site-footer .footer-legal-links{gap:16px;flex-wrap:wrap}
}
@media (max-width:760px){
  .hero-tile--kross{padding:7px}
  .hero-kross-mini{inset:7px;border-radius:13px}
  .hero-kross-mini__browser{inset:9% 6% 8%;border-radius:9px}
  .hero-kross-mini__nav span{display:none}
  .hero-kross-mini__content{grid-template-columns:.48fr 1fr;padding:6px 5px 5px 7px}
  .hero-kross-mini__copy strong{font-size:10px}
  .hero-kross-mini__copy small{font-size:3.8px}
  .kross-copy{padding:36px 26px}
  .kross-ui-wrap{min-height:0;padding:20px 14px 24px}
  .kross-browser{width:100%;border-radius:18px}
  .kross-product{grid-template-columns:1fr;min-height:470px;padding:24px 18px 18px}
  .kross-product__copy{padding-right:36%}
  .kross-product__copy h4{font-size:3rem}
  .kross-bike-stage{min-height:260px;margin-top:-8px;padding-top:0}
  .kross-bike-stage img{height:240px}
  .bike-orbit{width:230px}
  .kross-controls{right:14px;bottom:12px}
}
@media (max-width:620px){
  .site-footer .container{width:min(calc(100% - 32px),1160px)}
  .site-footer .footer-grid{grid-template-columns:1fr;gap:28px;padding:42px 0}
}
@media (max-width:480px){
  .site-footer .footer-bottom__inner{grid-template-columns:1fr;gap:10px}
  .site-footer .footer-legal-links{flex-direction:column;gap:0}
  .site-footer .footer-bottom__inner a,.site-footer .footer-cookie-settings{height:34px;min-height:34px}
  .kross-product__copy{padding-right:22%}
  .kross-bike-stage img{height:205px}
}
@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  .site-footer .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 34px;padding:36px 0 32px}
  .site-footer .footer-bottom__inner{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 0}
  .site-footer .brand--footer .brand__mark{font-size:3.9rem}
  .site-footer p,.site-footer a{font-size:.9rem}
  .kross-ui-wrap{min-height:0;padding:28px}
}


/* V5 / ONLY: homepage KROSS tile + footer brand proportions */
.hero-tile--kross-home{
  padding:0!important;
  background:#dce7e4!important;
}
.hero-tile--kross-home>img{
  display:block!important;
  width:calc(100% + 2px)!important;
  height:calc(100% + 4px)!important;
  max-width:none!important;
  margin:-1px 0 -3px -1px!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:scale(1.3)!important;
  transform-origin:center bottom!important;
  background:#dce7e4;
}
.hero-tile--kross-home:hover>img,
.hero-tile--kross-home:focus-visible>img{
  transform:scale(1.32)!important;
}

/* Transparent KROSS cutouts: retain the UI background instead of a JPEG rectangle. */
.kross-bike-stage img{
  mix-blend-mode:normal;
  filter:drop-shadow(0 18px 18px rgba(30,48,57,.2));
}

#krossBike[data-bike-variant="blue"]{transform:scale(.92)!important}
.kross-browser:hover #krossBike[data-bike-variant="blue"]{transform:translateY(-4px) scale(.94)!important}

/* Keep the footer JMK lockup at the exact natural proportions used on the homepage. */
.site-footer .brand--footer{
  position:relative!important;
  width:fit-content!important;
  max-width:100%!important;
  min-width:0!important;
  display:inline-flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0!important;
  line-height:1!important;
  transform:none!important;
}
.site-footer .brand--footer .brand__mark{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  color:var(--accent)!important;
  font-family:var(--serif)!important;
  font-size:4.6rem!important;
  font-weight:400!important;
  font-stretch:normal!important;
  font-style:normal!important;
  letter-spacing:0!important;
  line-height:1.08!important;
  transform:none!important;
  white-space:nowrap!important;
}
.site-footer .brand--footer .brand__sub{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin-top:0!important;
  padding-left:.18em!important;
  color:#5a5350!important;
  font-size:.55rem!important;
  font-weight:700!important;
  font-stretch:normal!important;
  line-height:1.1!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  transform:none!important;
  white-space:nowrap!important;
}
@media (orientation:landscape) and (max-height:650px) and (max-width:1100px){
  .site-footer .brand--footer .brand__mark{font-size:3.9rem!important}
}

/* Portfolio mobile width safety: portrait phones and touch landscape only. */
@media (max-width:767px),
       (min-width:768px) and (max-width:1199px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  html,body,main{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
  main>section,.portfolio-hero,.project-index-wrap,.work,.portfolio-principle,.cta{width:100%;max-width:100%;min-width:0}
  .container{width:100%;max-width:100%;min-width:0;padding-inline:clamp(16px,4vw,24px)}
  .hero-grid,.hero-copy,.hero-collage,.project-index,.work-intro,.featured-project,.kross-project-layout,.kross-copy,.kross-ui-wrap,.kross-browser,.kross-product,.kross-product__copy,.kross-bike-stage,.more-heading,.small-grid,.small-project,.principle-card,.principle-card>*,.cta-card,.cta-card>*{min-width:0;max-width:100%}

  .hero-copy h1,.section-title,.mb-overlay-card h3,.feature-copy h3,.kross-product__copy h4,.more-heading h3,.small-overlay h4,.principle-card h2,.principle-card p,.cta-card h2,.cta-card p{
    max-width:100%;
    overflow-wrap:break-word;
    word-break:normal;
    hyphens:auto;
  }

  .hero-copy h1{font-size:clamp(2.8rem,14vw,4.4rem)}
  .section-title{font-size:clamp(2.35rem,11.5vw,3.8rem)}
  .mb-overlay-card h3,.feature-copy h3{font-size:clamp(2.55rem,12vw,4rem)}
  .more-heading h3{font-size:clamp(2.15rem,9.5vw,3.25rem)}
  .principle-card{grid-template-columns:minmax(0,1fr);gap:22px;width:100%;padding:clamp(24px,6vw,36px);border-radius:clamp(22px,6vw,30px)}
  .principle-card h2{font-size:clamp(2.05rem,9.8vw,3rem);line-height:1.04;letter-spacing:-.03em}
  .principle-card p{font-size:clamp(.94rem,3.8vw,1rem);line-height:1.72}
  .cta-card{grid-template-columns:minmax(0,1fr);width:100%;padding:clamp(26px,6vw,38px)}
  .cta-card h2{font-size:clamp(2.15rem,10vw,3.25rem);line-height:1.03}
  .cta-button{max-width:100%;white-space:normal;text-align:center}
}

@media (max-width:840px),
       (min-width:841px) and (max-width:1199px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  body.mobile-menu-open .mobile-quick-nav{display:none!important}
}

/* Hide only the PAWS hover label on portrait mobile. */
@media (max-width:900px) and (orientation:portrait){
  .hero-tile--paws .hero-tile__label{display:none!important}
}