/* Persistent navigation and an editorial rhythm for Marinofolio. */
html{scroll-padding-top:100px}
#top,section[id],footer[id]{scroll-margin-top:100px}
.nav{position:sticky;top:12px;z-index:70;height:68px;width:min(1320px,calc(100% - 48px));margin:12px auto 0;padding:0 24px;border:1px solid #102b4620;border-radius:24px;background:#f4f7fac7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 5px 24px #102b4605;transition:box-shadow .3s,border-color .3s}
.nav.is-scrolled{box-shadow:0 8px 30px #102b4612;border-color:#102b4633}
.nav:after{content:'';position:absolute;left:24px;bottom:0;width:calc((100% - 48px)*var(--nav-progress,0));height:2px;max-width:calc(100% - 48px);border-radius:2px;background:#2463a6;pointer-events:none}
.nav .navlinks{gap:12px;font-size:14px}
.navlinks a{min-height:44px;display:flex;align-items:center;padding:8px 14px;border-radius:16px;white-space:nowrap;transition:background .2s,color .2s}
.navlinks a[aria-current="location"]{background:#102b46;color:#fff}
.navlinks a:hover:not([aria-current]){background:#102b4609}
.nav .nav-location{font-size:13px}
.nav-placeholder{height:80px}
.case-screen .nav{flex-shrink:0;color:var(--marino-ink);background:#f4f7fac7}
.case-top{top:86px;height:52px;margin-top:12px;border:0;background:#ffffffec;backdrop-filter:blur(20px)}
.case-screen{scroll-padding-top:152px}
.case-screen .case-progress{z-index:75}
.marino-hero{min-height:730px;background:radial-gradient(ellipse at 80% 50%,#d9e9f680,transparent 52%),var(--marino-paper)}
.hero-composition{height:730px}
.marino-hero .portrait{top:115px;height:625px}
.marino-hero .hero-copy{top:310px;max-width:570px;width:52%}
.marino-hero .eyebrow{font-size:16px;letter-spacing:0;margin-bottom:24px}
.marino-hero .hero-description{font-size:clamp(32px,3.5vw,46px);max-width:570px;line-height:1.16;letter-spacing:-.045em;font-weight:580;margin-bottom:28px}
.marino-hero .hero-description span{color:#527da4}
.marino-statement{padding:36px 0 46px}
.marino-statement .wrap{display:grid;grid-template-columns:1fr 2.2fr;gap:40px;align-items:start}
.marino-statement .eyebrow{font-size:14px;max-width:240px;line-height:1.5;margin:5px 0 0}
.statement-copy{font-size:clamp(22px,2.4vw,32px);line-height:1.3;letter-spacing:-.025em}
.feature{padding:70px 0 95px}
.feature-panel{background:#ef2d64;color:#fff;min-height:700px;border-radius:40px}
.feature-copy{padding:56px 0 50px 50px}
.feature-copy h2{font-size:clamp(46px,5vw,68px);line-height:1.04;letter-spacing:-.055em}
.feature-copy h2 span{display:inline-block;color:#fff2f6;font-size:.64em;line-height:1.16;margin-top:16px;letter-spacing:-.035em}
.feature-copy p{color:#fff5f8;max-width:385px;font-size:18px;line-height:1.55}
.feature-copy .pill{background:#fff;color:#751334;gap:0;font-size:16px}
.feature-links{color:#fff;font-size:15px}
.feature-icon{width:64px;height:64px;filter:drop-shadow(0 8px 20px #57112925)}
.feature-stage{min-height:700px}
.feature-stage .expert-front{width:290px;top:100px;left:5%;transform:rotate(-6deg)}
.feature-stage .expert-back{width:260px;top:40px;left:47%;transform:rotate(9deg)}
.feature-stage .stage-label{font-size:14px;color:#6d1837;background:#fff1f4;bottom:30px;left:14%}
.work{padding:30px 0 110px}
.work-heading{padding-top:34px;align-items:start;margin-bottom:32px}
.work h2{font-size:clamp(45px,5vw,70px);line-height:1.04}
.work h2 span{color:#527da4}
.section-description{max-width:365px;font-size:18px;line-height:1.55;padding-top:42px}
.filterbar{margin:32px 0 44px;gap:8px}
.filter{border:1px solid #102b4626;background:transparent;padding:12px 20px;color:#405e78;min-height:44px}
.filter.active{border-color:var(--marino-ink);background:var(--marino-ink)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:70px 28px;align-items:start}
.card,.card:nth-child(even),.card[data-id='my-puppets'],.card[data-id='car-repair']{grid-column:span 6;display:flex;flex-direction:column;grid-template-columns:none;background:transparent;border:0;box-shadow:none;border-radius:32px;padding:0;overflow:visible;min-width:0}
.card:nth-child(even) .art{order:0}
.card .art,.card:nth-child(even) .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:450px;border-radius:32px;margin:0;isolation:isolate;width:100%}
.card-index{position:absolute;top:22px;left:24px;z-index:5;font-size:14px;letter-spacing:.04em;color:#405e78}
.art.night .card-index,.art.repair .card-index{color:#d4e8f3}
.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:26px 4px 0;display:flex;flex-direction:column;justify-content:start}
.card .type{font-size:14px;line-height:1.45;color:#506b82;letter-spacing:0}
.card h3{font-size:clamp(32px,3.3vw,45px);margin:12px 0 12px}
.card p{font-size:18px;color:#23445f;line-height:1.45}
.card p.project-note{font-size:15px;color:#657c90;margin-top:10px;line-height:1.5}
.card-action{font-size:14px;margin-top:22px;align-self:start;border-bottom:1px solid #102b4660;padding-bottom:5px;transition:color .25s,border-color .25s}
.card:hover .card-action{color:#2463a6;border-color:#2463a6}
.card:focus-visible{outline-offset:10px}
.card[data-id='one-night-out'],.card[data-id='girairpinia'],.card[data-id='viva']{grid-column:span 7}
.card[data-id='my-puppets'],.card[data-id='checkit'],.card[data-id='car-repair']{grid-column:span 5}
.card[data-id='unwind']{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.45fr;background:#dfedf8;border-radius:36px;overflow:hidden;align-items:center}
.card[data-id='unwind'] .art{order:2;height:520px;background:transparent;overflow:visible}
.card[data-id='unwind'] .card-copy{padding:46px 0 46px 42px}
.card[data-id='unwind'] h3{font-size:clamp(42px,4.8vw,64px)}
.card[data-id='unwind'] .card-index{display:none}
.art .phone{width:190px;translate:0 var(--stage-drift,0px);transition:transform .7s var(--ease),translate .4s ease}
.art .phone:nth-of-type(1){transform:translateY(28px) rotate(-7deg)}
.art .phone:nth-of-type(2){transform:translateY(65px) rotate(7deg)}
.card[data-id='unwind'] .phone{width:205px}
.card[data-id='unwind'] .phone:nth-of-type(1){transform:translateY(-10px) rotate(-6deg)}
.card[data-id='unwind'] .phone:nth-of-type(2){transform:translateY(45px) rotate(5deg)}
.card:hover .art .phone:nth-of-type(1){transform:translateY(18px) rotate(-3deg)}
.card:hover .art .phone:nth-of-type(2){transform:translateY(50px) rotate(4deg)}
.project-watch{position:absolute;right:4%;bottom:44px;width:110px;border:4px solid #697581;background:#182029;border-radius:30px;padding:8px;box-shadow:0 14px 28px #102b4628;transform:rotate(-7deg);z-index:3}
.project-watch img{border-radius:20px;width:100%}
.art.night{background:#172029}
.art.puppets{background:#dcebf1;overflow:visible}
.art.puppets .tablet{width:82%;transform:rotate(-5deg);margin-top:0}
.art.puppets .card-dragon{width:36%;right:-4%;bottom:-12px}
.art.puppets .card-bunny{position:absolute;width:24%;left:-3%;bottom:12px;z-index:2;filter:drop-shadow(0 10px 15px #173e5220)}
.card[data-id='my-puppets'] .card-copy{padding-top:38px}
.art.check{background:#f9e3eb}
.art.gira{background:#d8f0ed}
.art.repair{background:#293a49}
.art.repair .native-window{width:38%;max-height:360px;object-fit:contain}
.art.repair .native-window:nth-of-type(1){left:-1%;top:150px;transform:rotate(-6deg)}
.art.repair .native-window:nth-of-type(2){left:26%;top:60px;width:48%;z-index:2}
.art.repair .native-window:nth-of-type(3){left:66%;top:150px;transform:rotate(6deg)}
.grid[data-visible-count="1"] .card{grid-column:1/-1}
.about{background:#e5edf4;border-radius:48px 48px 0 0;padding-top:85px}
.about-top{margin-bottom:55px}
.about-top h2{font-size:clamp(50px,6vw,82px);width:60%}
.about-grid{grid-template-columns:1.4fr 1fr;gap:85px}
.about .about-lead{font-size:36px}
.about p{font-size:18px}
.timeline{margin-top:0}
.timeline div{grid-template-columns:105px 1fr}
.toolkit span{font-size:14px}
.creative-side{padding-top:85px}
.creative-heading h2{font-size:clamp(48px,6vw,82px)}
.passion-grid{grid-template-columns:1.5fr 1fr;gap:40px 56px}
.passion-music{grid-row:span 2;display:grid;grid-template-columns:1.05fr .85fr;gap:30px;align-items:center}
.passion h3{font-size:28px;margin-top:24px}
.passion-music h3{font-size:clamp(28px,3.2vw,43px);line-height:1.13}
.passion p{font-size:17px;margin-bottom:20px}
.passion-art{min-width:0}
.passion-art .expert-device{width:100%;transform:rotate(7deg)}
.passion-signature{font-size:14px}
.contact-email{display:inline-block;font-size:clamp(21px,3.1vw,42px);letter-spacing:-.03em;border-bottom:1px solid #102b4640;margin:5px 0 30px;padding-bottom:10px;overflow-wrap:anywhere}
.contact-email:hover{color:#2463a6}
.footer-socials{margin-top:0}
@media(min-width:1550px){.hero-composition,.marino-hero{height:800px;min-height:800px}.marino-hero .portrait{top:120px;height:690px}.marino-hero .hero-copy{top:330px}}
@media(max-width:1100px){.nav .nav-location{display:none}.marino-hero .hero-copy{top:290px}.marino-hero .portrait{top:130px;width:360px}.hero-composition,.marino-hero{height:710px;min-height:710px}.feature-copy{padding-left:35px}.feature-stage .expert-front{width:255px;left:0}.feature-stage .expert-back{width:230px;left:44%}.card[data-id='unwind']{grid-template-columns:1fr 1.25fr}.card[data-id='unwind'] .phone{width:175px}.card[data-id='unwind'] .card-copy{padding-left:30px}.about-grid{gap:50px}.passion-grid{gap:30px}.passion-music{grid-template-columns:1fr .7fr;gap:20px}}
@media(max-width:900px){.grid{gap:55px 24px}.card[data-id='unwind']{grid-template-columns:1fr}.card[data-id='unwind'] .art{order:0;height:440px}.card[data-id='unwind'] .card-copy{padding:28px 30px 36px}.card[data-id='unwind'] .phone{width:190px}.card[data-id='unwind'] .project-watch{right:18%;bottom:35px}.card,.card[data-id='one-night-out'],.card[data-id='girairpinia'],.card[data-id='viva'],.card[data-id='my-puppets'],.card[data-id='checkit'],.card[data-id='car-repair']{grid-column:span 6}.card .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:370px}.art .phone{width:150px}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding-top:24px}.passion-music{display:block}.passion-art{width:160px;margin:35px auto 5px}.passion-art .expert-device{transform:rotate(5deg)}}
@media(max-width:760px){html{scroll-padding-top:90px}#top,section[id],footer[id]{scroll-margin-top:90px}.nav{top:8px;width:calc(100% - 24px);height:62px;margin-top:8px;border-radius:20px;padding:0 12px}.nav .brand{width:128px;height:46px}.nav .navlinks{gap:8px}.navlinks a{padding:8px 4px;min-width:44px;justify-content:center}.nav:after{left:12px;max-width:calc(100% - 24px);width:calc((100% - 24px)*var(--nav-progress,0))}.nav-placeholder{height:70px}.case-top{top:76px;margin-top:8px;padding:0 18px;height:48px}.case-screen{scroll-padding-top:134px}.hero-composition{height:910px;padding-top:32px}.marino-hero{height:auto;min-height:0}.marino-hero .portrait{top:112px;width:270px;height:440px}.marino-hero .hero-copy{top:555px;width:100%;max-width:100%}.marino-hero .eyebrow{font-size:15px;margin-bottom:20px}.marino-hero .hero-description{font-size:29px;line-height:1.18;max-width:410px;letter-spacing:-.035em;margin-bottom:24px}.hero-wave{height:90px}.marino-statement{padding:30px 0 38px}.marino-statement .wrap{display:block}.marino-statement .eyebrow{margin:0 0 18px;max-width:none}.statement-copy{font-size:25px}.statement-copy br{display:none}.feature{padding:55px 0 65px}.feature-panel{border-radius:30px;min-height:0}.feature-copy{padding:34px 28px 0}.feature-copy h2{font-size:50px}.feature-copy h2 span{font-size:.68em}.feature-copy p{font-size:17px}.feature-stage{min-height:570px}.feature-stage .expert-front{width:230px;left:7%;top:100px}.feature-stage .expert-back{width:215px;left:45%;top:30px}.feature-stage .stage-label{left:10%;font-size:13px;bottom:25px}.work{padding:20px 0 75px}.work-heading{display:block;padding-top:25px}.work h2{font-size:49px}.section-description{padding-top:0;margin:24px 0 0;font-size:17px}.filterbar{margin:25px 0 35px;gap:6px}.filter{padding:10px 15px;font-size:14px}.grid{display:flex;flex-direction:column;gap:48px}.card,.card:nth-child(even),.card[data-id='my-puppets'],.card[data-id='car-repair']{display:flex;flex-direction:column;width:100%;padding:0}.card .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:380px;border-radius:28px}.card-copy,.card[data-id='my-puppets'] .card-copy,.card[data-id='car-repair'] .card-copy{padding:23px 3px 0}.card h3{font-size:37px}.card .type{font-size:14px}.card p{font-size:18px}.card p.project-note{font-size:15px}.card-action{margin-top:18px}.art .phone{width:160px}.card[data-id='unwind']{overflow:hidden;border-radius:30px}.card[data-id='unwind'] .art{height:395px}.card[data-id='unwind'] .card-copy{padding:22px 25px 32px}.card[data-id='unwind'] h3{font-size:44px}.card[data-id='unwind'] .phone{width:160px}.card[data-id='unwind'] .project-watch{right:5%;bottom:25px;width:92px;border-radius:26px;padding:7px}.project-watch img{border-radius:17px}.art.puppets .card-dragon{right:-2%;bottom:0}.art.puppets .card-bunny{left:-2%;bottom:15px}.art.repair .native-window:nth-of-type(1),.art.repair .native-window:nth-of-type(3){top:140px}.art.repair .native-window:nth-of-type(2){top:70px}.about{border-radius:32px 32px 0 0;padding-top:55px}.about-top{display:block;margin-bottom:34px}.about-top h2{width:100%;font-size:55px}.about-grid{grid-template-columns:1fr;gap:32px}.about .about-lead{font-size:31px}.about p{font-size:17px}.about-detail{padding-top:0}.creative-side{padding-top:60px}.creative-heading h2{font-size:55px}.creative-heading{margin-bottom:40px}.passion-grid{grid-template-columns:1fr;gap:38px}.passion-music{display:grid;grid-template-columns:1fr .62fr;grid-row:auto;gap:20px}.passion h3{font-size:29px}.passion-music h3{font-size:30px}.passion-art{width:auto;margin:0}.passion-music p{font-size:16px}.contact-email{font-size:23px;margin-bottom:25px}.footer{padding-top:65px}}
@media(max-width:380px){.nav .brand{width:110px}.nav .navlinks{gap:6px}.marino-hero .hero-description{font-size:26px}.hero-composition{height:895px}.art .phone,.card[data-id='unwind'] .phone{width:145px}.passion-music{grid-template-columns:1fr}.passion-art{display:block;width:145px;margin:25px auto 0}.feature-copy h2{font-size:45px}.contact-email{font-size:21px}}
@media(prefers-reduced-motion:reduce){html,.case-screen{scroll-behavior:auto}.nav,.art .phone{transition:none}.art .phone{translate:none}}


/* The same story, with room to breathe at every screen size. */
.passion-music{grid-template-columns:1fr;gap:8px}
.passion-music .passion-copy{max-width:530px}
.passion-music .passion-art{width:100%;max-width:520px;margin:0 auto}
.friendship-bracelet{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 20px #06162740)}
@media(min-width:761px) and (max-width:1000px){
 .marino-hero .portrait{width:32%;right:0;top:135px;height:560px}
 .feature-stage .expert-front{width:53%;left:2%;top:130px}
 .feature-stage .expert-back{width:48%;left:47%;top:65px}
}
@media(max-width:760px){
 .hero-composition{height:auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);padding-top:28px;padding-bottom:145px}
 .marino-hero .portrait{position:relative;top:auto;left:auto;right:auto;transform:none;width:min(66vw,270px);height:clamp(320px,96vw,410px);margin:24px auto 0}
 .marino-hero .hero-copy{position:relative;top:auto;left:auto;width:100%;max-width:500px;margin:-8px auto 0}
 .marino-hero .eyebrow{margin-bottom:16px}
 .marino-hero .hero-description{font-size:clamp(26px,6.6vw,36px);max-width:500px}
 .hero-socials{gap:14px}
 .feature-copy{padding:30px 25px 0}
 .feature-copy h2{font-size:clamp(39px,10.5vw,57px)}
 .feature-stage{min-height:clamp(430px,130vw,610px)}
 .feature-stage .expert-front{width:54%;max-width:255px;left:6%;top:80px}
 .feature-stage .expert-back{width:49%;max-width:230px;left:44%;top:20px}
 .feature-stage .stage-label{bottom:24px;left:8%}
 .filterbar{flex-wrap:wrap}
 .card .art,.card[data-id='my-puppets'] .art,.card[data-id='car-repair'] .art{height:clamp(310px,95vw,430px)}
 .card[data-id='unwind'] .art{height:clamp(340px,100vw,430px)}
 .art .phone,.card[data-id='unwind'] .phone{width:clamp(135px,41vw,180px)}
 .about-top h2,.creative-heading h2{font-size:clamp(44px,12vw,60px)}
 .passion-music{display:grid;grid-template-columns:1fr;gap:12px}
 .passion-music h3{font-size:clamp(30px,8.5vw,42px);max-width:480px}
 .passion-music p{font-size:17px}
 .passion-music .passion-art{width:100%;max-width:430px;margin:0 auto}
 .passion-grid{gap:38px}
}